I have a header region where i like to have my navigation available in the initial markup (because of SEO)
<header id="header-region">
<ul id="menu">
<li>frontpage</li>
<li>about</li>
<li>contact</li>
<li>testing</li>
</ul>
</header>
Then i created a Marionette Layout View:
var MenuView = Backbone.Marionette.ItemView.extend({});
var menuView = new MenuView({
el: '#menu'
});
App.headerRegion.attachView(menuView);
This works flawless, but when i later change the headerRegion content
App.headerRegion.show(anotherView);
And then wanna switch back to the original mainView using
App.headerRegion.show(menuView);
It tries to render the menuView but because it has no "template" it fails, can i somehow reuse the same view instance without re-render it ? Or is the "Marionette way" of doing it to re-initialize a new menuView ? (im just curious if i have a rather complex view that needs to be swapped out quite alot, the view re-render each time could be quite expensive)
When a region's content is swapped in Marionette the previous view that was displayed in that region will be closed; and you generally want to avoid reusing views that have previously been closed. There is quite a bit of binding (of event and dom component) that goes into inflating a view and you could cause hard to track bugs re-using views because some of those bindings might not happen.
I've ran into a few my self like Switching views on regions loses the event bindings.
Calling App.headerRegion.show(anotherView); will dump the contents of your header region and replace those with the contents of anotherView. When you try to revert the region to its previous state by calling App.headerRegion.show(menuView), the markup you were relying on no longer exists.
The Backbone/Marionette way to do this is to use a template. Marionette uses underscore templating by default, so you can just include the following on your page:
<script type="text/template" id="menu">
<ul>
<li>frontpage</li>
<li>about</li>
<li>contact</li>
<li>testing</li>
</ul>
</script>
And then define your MenuView as:
var menuView = new MenuView({
template: '#menu'
});
Related
I am new in Backbone.js and I keep failing to understand how the model and the view are connected.
I played with Angular where things are pretty clear there, how model, view and controller are connected.
I know Angular and Backbone are different and the latter is MV*.
In Backbone I can understand how model and view are created and work, but how are they connected? Seems to me they are seperated.
Please take a minute to explain or point me to a tutorial.
Thanks in advance
EDIT
OK, here is an example. It happens that I read the book that trolle suggests. This is a code from the book's github
I start reading. I understand the Todo model. I understand the TodoList collection. Then I get to the TodoView
creates a new li
uses Underscore template to compile html
defines some functions that imlements later in the same view
defines an initialize function
inside that function
what is this? this.model.bind('change', this.render, this);
how he can magically bind the action change to a model? How the code knows about the model? When he defined the model and how? Just because is there, the code knows that model = Todo model?
How does he do that bind? What am I missing.
This confuses me, so reading AppView view does not help me much
Thanks again
In backbone.js views are used for displaying models in browser.
For example you can have a model object, whose JSON representation resembles the following: {'firstName': 'foo', 'lastName': 'bar' }
And you use view object to map this model to browser DOM.
As a rule, you use view object along with certain template engine.
Templates allows for creating html chunks filled with model's data.
If you are using underscore template function, your template may look something like this:
<div>
<div>First Name: <%= firstName %></div>
<div>Last Name: <%= lastName%></div>
</div>
After merging template with model's data it would be:
<div>
<div>First Name: foo</div>
<div>Last Name: bar</div>
</div>
You can reuse this view object and its template to display another model object, for example {'firstName':'another foo', 'lastName':'another bar'}, so that the result html would be:
<div>
<div>First Name: another foo</div>
<div>Last Name: another bar</div>
</div>
That is one thing about connection between model and view.
Also view object can listen to changes in your model object to render immediately last updates. For example (inside view object):
initialize: function() {this.listenTo(this.model, 'change', this.render);}
In short, views are the logic behind the presentation of the model's data to the user. So in its simplest form, you bind a model to a view through the models change events, so you can update the presentation instantly whenever your data changes. So a simple view would take in a model, create HTML elements based on that models data, insert that html into the DOM and update that HTML whenever the data changes.
You can find a great book full of helpful examples here (free): http://addyosmani.github.io/backbone-fundamentals/
EDIT:
With regards to your updated question about how the view knows about the model, this.model is a reference to the actual model object. You can set the reference to the model when you create the view. That is, when you call your view-constructor to instantiate a view, you could pass in a model. You need to go all the way into the AppView object in the code example to see where this happens, in the addOne method:
addOne: function(todo) {
var view = new TodoView({model: todo});
this.$("#todo-list").append(view.render().el);
}
The function gets a model as a parameter, and when the view is instantiated that model is referenced. So now you have a view that knows about the model, and when the view.render method is called, the view can render it's template with the model data. When you change the data in the model, for instance by using the set method, myModel.set({title: "March 20", content: "In his eyes she eclipses..."});, you trigger the change event for that model. You can see all the built in events for backbone here: http://backbonejs.org/#Events-catalog. The view is listening for that event, just like it could listen for a click event or any other event. In the code in your example the view listenes for a change event from the model. If it hears it it knows that the object behind this.model has changed, and it can then update the DOM with the new data or do something else. In the case of the example it calls this.render, which updates the DOM with the new model data.
I think you want to know about Backbone.Events (http://backbonejs.org/#Events), both Models and Views make use of this module and that's how the view learns about changes in the Model, if you want to learn how this is implemented you can always read the annotated source (http://backbonejs.org/docs/backbone.html#section-19), but more important I think you want to learn about the observer pattern: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript.
When I try to append my backbone view to two different places at the same time in my success method only the second appending works. Do you know why?
$(content).prepend(this.$el.append(this.template({ data: data })));
$(chat_window).prepend(this.$el.append(this.template({ data: data })));
Each DOM node can have exactly 0 or 1 parent nodes, never more than 1. If you append a node somewhere, it gets removed from it's current parent and then appended to the new parent. What you need here is 2 distinct view instances each with it's own element.
el corresponds to one html element that a backbone view generates. Into that html element you can append more html weather it be another backbone view or a rendered template.
Hence in your case if the el is attached twice it finally stays where it was attached last to the dom tree. If you want attach in multiple places then I guess you should instantiate the backboneview twice.
In my opinion, the view you're talking about should not know about its distant parents or cousins but rather should trigger an event "I have new content" and then the interested views can act upon this the way they want.
That being said there is a difference between a view and its html representation(s), you could design your app so that you get 2 places in the html where you put ".new-content-holder" and pass this selector as the el of your view upon creation. Then the 2 places will be updated at the same time without you explicitly programming it. I sometimes use this technique for example when I want a paginator for a long list to be displayed over and under the list.
Some html :
<div class="content">
<p>Recent comments</>
<ul class="new-content-holder"></ul>
</div>
<div class="chat-room">
Live feed
<ul class="new-content-holder">
<li>a chat message</li>
<li>another chat message</li>
</ul>
</div>
And a view
....
var MessageView = Backbone.View.extend({
template: _.template('<li class="chat-message"><%= message %></li>'),
prependData: function(data){
this.$el.prepend(this.template(data))
},
onMessage: function(message) {
this.prependData({message: message.data})
}
});
....
//And in a super controller of sorts :
var messageView = new MessageView(el: '.new-message-holder')
Again, this is not a very good separation of concerns...but I hope that helps.
I agree with #Peter Lyons, You can not inject the same node into two elements. Ultimately, the node will move to new element. One of the ways is to get HTML from the element you want to inject and inject the same HTML twice. Since html is a string and not a dom element. You can add it as many times and inside as many elements.
Try this one:
var html = this.$el.append(this.template({ data: data })).html();
$(content).prepend(html);
$(chat_window).prepend(html);
I hope you are not using id's on elements inside your template.
PS: I don't know your use case exactly.
I have created a Backbone.js/Require.js application that dynamically loads HTML templates to use as "pages" in the application. This means my main HTML page looks like so.
<head>
// Necessary CSS and Javascripts here
</head>
<body>
<div id="container"></div>
</body>
And then I used underscore templates to render new elements dynamically to the DOM. However, a new feature requires the use of a Raphael.js chart. I created a new element <div id='canvas'></div> and call Raphael('canvas') but since the canvas element wasn't there on DOM ready, Raphael can't see the newly created element.
I have attempted to use a jQuery selector in place of the id reference like so Raphael($('#canvas')) but this attaches the canvas to the body element and not my container element.
Any suggestions on how to bind a Raphael canvas to a dynamically created element?
Raphael($('#canvas').first(), '100%', '100%')
Though I had errors else where, the main issue that caused Raphael not to fire was forgetting that a jQuery selector passes an array of Elements and Raphael's constructor want's a single element. Raphael was attaching itself to the body because it was the top level parent of the selector's result.
Mosselman was also correct in pointing out that you can build a view in Backbone entirely in memory and then append it to the DOM.
A way to overcome this issue is by creating an empty element in the view and binding everything onto that. I have never worked with Raphael, but I think this could work:
var someView = Backbone.View.extend({
el: document.createElement('div'), // This creates a DOM element '<div></div>'
initialize: function(){
Raphael(this.el); // Attach Raphael, you could also go with jQuery
},
render: function(){
jQuery('#container').append(this.el); // Add to DOM somehow
}
})
seems like a good approach is to either throw an event after the template has been added to the DOM and have your call to Raphael('canvas') listen for that event or use a callback to trigger Raphael('canvas'). in both cases you are ensuring that you don't call Raphael('canvas') before the target element is in place.
very roughly, something like this:
//from your raphael module / code
$(document).on('canvasAdded', function(){
var paper = Raphael('canvas');
//stuff!
});
//after you are sure your template has rendered
$(document).trigger('canvasAdded');
you probably want to make some kind of .init() method and call that from the event handler (vs. what I show above) but hopefully this points you in the right direction.
I know that this is too old question, but anyway it can help to someone. Its important to be sure that your view is placed on page, so use something like onShow functionality, or render. But anyway Raphael will not show right because if your send to Raphael this.$el or anything similar it will not accept it like you expect. What You need to do is something like this.$el.first() or this.$el[0].
I've got a backbonejs application with two view. It kind of looks like this:
<body>
<header></header>
<div id="content"></div>
</body>
Every time a view is loaded the app overwrites the current view by completely overwriting the contents of #content.
// Like this...
$('#content').html( new primaryView().render() );
// ...and this.
$('#content').html( new secondaryView().render() );
The application has a global collection.
App.Collection();
The secondary view modifies itself depending on the global collection. Therefor it binds a function to the 'add' event' on App.Collection in the views initialize function;
App.Collection.bind('add', function(){
console.log('Item added');
});
Which result in my problem. Every time the secondary view is loaded a new function is binded to App.Collection's add event. If I go from the primary view to the secondary view three times, the function will fire three times everytime an item is added to App.Collection.
What am I doing wrong?
I can see how I would do it if there was an uninitialize function on views.
I can see how I could do it if I never removed a view once it was loaded.
I can see how I would do it if I could namespace events like in Jquery. (by unbinding before binding).
You can generalize your problem quite a bit. Basically, you are writing an event-driven app, and in such app events should be taken care of.
Check out this post to see a recommended way to work with event handlers in backbone.
Depending on the situation, you can use initialize and render methods to handle different aspects of creating a view. For instance, you can put your binding inside the initialize
initialize: function() {
App.Collection.bind('add', function(){
this.view.render()
});
}
which only fires when the view is created. This binds your render method to the add event. Then in your render method you can actually create the html.
This prevents the binding from happening every time you need to re-render.
I have a Backbone app that renders several related views on each page they you navigate to. For example, one page renders the following views:
Context bar
Drop-down menus
Pagination
Main table
Table rows
The main table view here is the first to be appended to the DOM by my router - within this view reset is bound to an appendRows function within it - which addes in each table row:
// Instantiate the view, render and append it to the DOM
var tableView = new TableView({ collection: blahCollection });
$("main").append(tableView.render().el);
// Fetch the latest data for the collection (triggers a reset which appends rows)
blahCollection.fetch();
This seems logical to me, however when it comes to adding in a pagination sub-view for example, I ask myself the question, "should a view really be controlling what is appended to the screen"?
Therefore, given the pagination example:
Should a view (in this case the main table view) control how/when pagination is appended to the DOM?
Should the router? If so, should it call a function on the parent view to do this - or should the logic be kept completely outside of the main view?
I like letting my router do a lot of the high-level stuff for me. For instance, I will set up a basic layout... something like this:
<body>
<div id="contextBar">
<div id="menus"></div>
<div id="pagination"></div>
</div>
<div id="mainTable"></div>
</body>
Then, in my router handler, I'd hook up the views that are unrelated to each other:
var contextView = new ContextView({el: $("#contextBar")});
var menusView = new MenusView({el: $("#menus")});
var paginationView = new PaginationView({el: $("#pagination")});
var tableView = new MainTableView({el: $("#mainTable")});
As far as the main table goes, I see the table view and the rows view being tightly coupled as they are directly related to each other, so I usually have the collection view (your table view) create and manage the individual item views (your table row view).
At least, that is how I organize my code with Backbone.