Removing backbone.js view does not allow me to add another view - javascript

It looks like whenever I call view.remove() it not only removes the view from the dom but also the entire body
I'm calling showView after the creation of each view
showView : function(view) {
if (this.currentView) {
this.currentView.remove();
this.currentView.unbind();
if (this.currentView.onClose) {
this.currentView.onClose();
}
}
this.currentView = view;
$('body').html(this.currentView.render().el);
}
Since there is no longer a body element I cannot add another view
Chrome debugger output:
$('html')
<html>​
<script id=​"tinyhippos-injected">​…​</script>​
<head>​…​</head>​
</html>​
Once the view.remove() is ran the screen turns white and doesn't repopulate on $('body').html(this.currentView.render().el);
EDIT:
I changed each view from el: $('.body') to el: '.mainContent' and added a in the index.html file.
In the app.showView I add the mainContent div if it has been removed. Better to remove a div than the entire body.
if($('.mainContent').length == 0)
$('body').append('<div class="mainContent"></div>');
SOLUTION:
I needed to override my view remove method. I didn't want to remove the entire el, just the contents: Recreating a removed view in backbone js
Backbone.View.prototype.remove = function() {
this.undelegateEvents();
this.$el.empty();
return this;
};

Since you are adding the view via $('body').html(this.currentView.render().el); you don't need to set the el property in the view.
When you set the el property in the view, you are telling backbone to find that element and use it as the base element. When doing that, you don't need to add it to the page with $('body').html(), you can just call view.render(). But then when you call remove(), it will remove the el you set (in your case 'body' or '.mainContent').
If you don't specify an el, it generates a new element for you. In that case, you do need to add to the page with $('body').html(this.currentView.render().el);, but then when you call remove() it will only remove the generated element.
So, if you just remove el: '.mainContent' from your views, you can avoid having to check for and re-add that element. Also you will not have to override remove.
After removing el: '.mainContent' from the view, you can simply do this:
$('body').html(view1.render().el);
view1.remove();
$('body').html(view2.render().el);

Related

Can't find element using UI hash in Marionette Layout

I'm not sure why I can't get the button element using my UI hash. This is what my Layout looks like:
Layout: App.Base.Objects.BaseLayout.extend({
// Rest of the code left out for brevity
ui: {
btnSave: "#btnSave"
},
events: {
"click #ui.btnSave": "onSave"
},
onInitialize: function () {
this.listenTo(App.vent, "DisableSaveButton", function(val) {
this.disableSaveButton(val);
},this);
},
disableSaveButton: function () {
this.ui.btnSave.prop("disabled",val).toggleClass("ui-state-disabled",val);
},
onSave: function () {
alert("saved!");
}
})
In VS2013, when my breakpoint hits the line inside disableSaveButton method, I entered $("#btnSave") into the Watch window and I was able to get the element back. I could tell because it had a length of 1. From this, I know the button is rendered. However, if I enter this.ui.btnSave into the Watch window, I would get an element with length of 0.
My BaseLayout object is basically a custom object extended from Marionette.Layout
Marionette version: 1.8.8
Any ideas why I can't find the button element using this.ui.btnSave?
Thanks in advance!
Got some help from a coworker and the issue might be because the element is out of scope. Basically, inside the Layout object, 'this' does not contain the element. We were able replace 'this.ui.btnSave' with '$("#btnSave",this.buttonset.el)' and that works fine. buttonset is the region that actually contains the html element.
This seems like an inconsistency because even though the ui hash didn't work, the click event utilizing the ui hash did work.
UPDATE 6/3/2015:
Another coworker of mine provided a better solution. Basically, in my Layout I use a display function to display my view. It looks something like this:
Layout: App.Base.Objects.BaseLayout.extend({
// Rest of the code left out for brevity
display: function() {
$(this.buttonset.el).html(_.template($("#buttonset-view").html(), {"viewType": viewType}));
}
})
Basically, I'm saying to set the html of my region, which is this.buttonset.el, to my template's html. As of now, my layout doesn't know any of the elements inside the region. It just contains a region which displays the elements. So there is some sort of disconnect between my layout and the elements in my region.
The correct solution, as opposed to my earlier workaround, is to simply add the following line of code at the end:
this.bindUIElements();
From Marionette Annotated Source:
This method binds the elements specified in the “ui” hash inside the
view’s code with the associated jQuery selectors.
So this final code looks like this:
Layout: App.Base.Objects.BaseLayout.extend({
// Rest of the code left out for brevity
display: function() {
$(this.buttonset.el).html(_.template($("#buttonset-view").html(), {"viewType": viewType}));
this.bindUIElements();
}
})
With this, I was able to finally able to retrieve my element using this.ui.btnSave.

Ember - Resize DIV on load, transition and resize?

I'm building an Ember app that needs to size a container DIV to be full window height on load of the application, and then run the same resize function again when transitioning to a new route, and then also on window resize.
On a normal site, I'd do this:
var appUI = {
init: function(){
appUI.sizeContainer();
},
sizeContainer: function(){
var winHeight = jQuery(window).height();
jQuery('#container').height(winHeight);
},
onResize: function() {
appUI.sizeContainer();
}
}
jQuery(document).ready(function($){
appUI.init();
jQuery(window).resize(function(){
appUI.onResize();
});
});
But obviously this won't work in Ember.
This can't be a component, because the #container DIV wraps the entire current view. But with Ember moving away from views, how should I do this?
The only way I came up with was to use a view, and hook onto didInsertElement, but I couldn't figure out how can I do it without having to create a view.js file for every route, that contains the same resize code? And how about the resize event? I thought the application view didInsertElement might work for this, but it only runs once on load.
All my route templates basically follow this patten:
{{top-header}}
{{background-image image=backgroundImage}}
{{side-menu session=session menuOpen=menuOpen}}
<div id="container" class="vert-center route-name">
{{partial "_logo"}}
{{some-component}}
</div>
On loading the application and on window resize can be done pretty much the way you described.
One easy way is to override the renderTemplate hook inside the ApplicationRoute. Within this hook, you can render your application template and then initialize the resize listener on the window object:
// handles on document load and on window change events
App.ApplicationRoute = Ember.Route.extend({
renderTemplate: function(controller, model) {
this.render('application'); // render the application template
appUI.init(); // call the init event on application load
Ember.$(window).resize(function() { // setup resize listener on the window object that will be called when window resizes
appUI.onResize();
});
}
});
As far as resizing each time a route loads, you could implement a generic Ember.Route, let's call it ResizableRoute for example, that calls the appUI.resize() after its template is rendered. This can again be achieved with overriding the renderTemplate hook.
// calls onResize() each time the current route's template is rendered in the DOM
App.ResizableRoute = Ember.Route.extend({
renderTemplate: function() {
// render the template with the same name as the route (assumes you follow ember naming conventions)
this.render(this.routeName);
// call resize since the route is loaded
appUI.onResize();
}
});
Now you can make any other route extend this ResizableRoute and, every time that route's template is rendered, appUI.onResize() will be called.
App.AnyOtherRoute = App.ResizableRoute.extend({
// do other stuff
});
The reason all the calls are made AFTER the template is rendered is because that way the #container element is definitely inserted in the DOM already and can be grabbed using jQuery.
Here is a running jsFiddle example
EDIT
Instead of overriding the renderTemplate hook, another way you could achieve this is to create a ResizeUIComponent that will perform resizing each time your route is loaded. The flaw is that you have to remember to insert this component into each route's template.
App.ResizeUIComponent = Ember.Component.extend({
didInsertElement: function() {
this.$().hide(); // make the component invisible, probably better to do it with css but this is a quick example
appUI.onResize();
}
});
And add this component to all templates (including application) you want to call onResize() each time they load:
{{top-header}}
{{background-image image=backgroundImage}}
{{side-menu session=session menuOpen=menuOpen}}
<div id="container" class="vert-center route-name">
{{resize-ui}} {{!-- add the invisible resize component as the child of #container to ensure necessary rendering order --}}
{{partial "_logo"}}
{{some-component}}
</div>
And you can add a listener on the window object after the init event of the ApplicationController:
App.ApplicationController = Ember.Controller.extend({
onInit: function() {
Ember.$(window).resize(function() { // setup resize listener on the window object that will be called when window resizes
appUI.onResize();
});
}.on('init');
});

Using highlight.js in ember

My ember app is set up with a list of posts on the left and a view for an individual post on the right. When one of the posts on the left is clicked it's content is rendered in the view on the right.
This is the code I'm using to add syntax highlighting to a post.
App.PostView = Ember.View.extend({
didInsertElement: function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
}
});
When the first post view is rendered, it has the syntax highlighting, but when I click on a different post and it's content gets loaded into the post view the syntax highlighting does not get applied. How can I make it so that the highlighting applied every time a post is rendered?
I can only guess without a more comprehensive example. Is PostView what gets created in the right panel? If so, then you need to constrain your view rendering to the stuff inside the view.
In your example, $('pre code') will target all pre code elements inside the document. Try this.$('pre code'), or whatever element/selector needs to be highlighted within the view.
This may be not the cleanest way to do the job, but you could try adding observer to the controller's model, and make required changes. But this will only work, if the model itself changes.
Like this:
postHasChanged: function() {
if (this.get('state') === 'inDOM') {
$('pre code').each(function(i, e) {
hljs.highlightBlock(e)
});
}
}.observes('controller.model')

Backbone stops working if I remove view to separate file

Drives me crazy, take a look at this jsfiddle - it is very simplified version of my issue but it's absolutely demonstrative. Like this it works, but if you delete AppView definition
var AppView = Backbone.View.extend({
el: $("body"),
initialize: function() {
console.log('init');
this.render();
},
render: function() {
console.log('render');
this.$el.html("123");
}
});
from "main" script (check yourself - the same definition will be still included in "external resources" section) - it stops working. I've tried to check with console.log if the definition is still available in global namespace, and of course it is. Have no idea.
Update:
And even more - it is not just available - goddamn thing work as we can is in chrome dev console by console.log() but this.$el.html("123"); affect nothing!
If you inspect the bottom-right panel in your fiddle, you can see that the AppView.js file is included in the head of the generated document shown in the iframe.
The View is defined with the el element set to $('body')
el: $("body")
But the body Node does not exist, yet: it is an empty jQuery object.
Inside the jQuery document ready callback, the AppView definition finds the body element as you expect.
I understand your need to move the definition of the View in a separate javascript file.
You can achieve the result in many ways. The most obvious is to include the script element that imports it inside the body element. A nicer way could be to set the el in the initialize method of the AppView definition or, even better, you could pass the element to the constructor, as Kenan explains in his comment below.

Backbone.JS view renders, but not displayed on page

I'm working on converting a single-page app to backbone.JS. The View below uses the body tag as it's tagName - ie, I want the view to occupy the entire content of the page. I don't want to use container divs or other hacks.
var ThingView = Backbone.View.extend({
tagName : "body",
...
// Show the HTML for the view
render : function() {
console.log('Displaying thing')
$(this.el).append('<h1>test</h1>');
console.log('finished')
console.log($(this.el))
return this; // For chaining
When rendering, I see
finished
[
<body>​
<h1>​test​</h1>​
</body>​
]
But after I inspect the DOM, the body no longer has the text.
tagName indicates what tag Backbone should use to create its el if no el is provided by the constructor. The created element is not automatically inserted into the DOM.
The simplest way is probably to create your view with its el set to body :
new ThingView({el:'body'})
What nikoshr explained is correct. Adding to it, Using tagName is correct. but Ideally you should use el element, which is defined in Backbone.js library as an element (el) of View.
Below is the ideal code you should use while doing this.
<script type="text/javascript">
$(document).ready(function(){
var ThingView = Backbone.View.extend({
el:$("body"),
initialize: function(){
_.bindAll(this,"render");
this.render();
},
render:function(){
this.el.append('<h1>test</h1>');
console.log('finished');
console.log($(this.el).html());
}
});
var ThingView = new ThingView();
});
</script>

Categories

Resources