I plan to create a Backbone.js View for rendering a list of items. The list will grow. It seems to me that for performance reasons I should not empty and rebuild the DOM with the items. Does this make sense? How would you approach this?
My typical setup for this kind of thing is to use a define a Backbone.View for the ul or whatever containing element I have and bind that to a collection. Then define another Backbone.View to render a single list item. Instances of this view have a one-to-one relationship with the models in the collection.
Collections have different events that correspond nicely with the different types of DOM operations you would need to perform to reflect them. I map them like this:
sync = [render entire list on first fetch]
add = this.$append(...)
remove = [find corresponding list view item].remove()
OK, so this code is just hammered down from memory and not tested, but you get the idea:
var collection = new Backbone.Collection({
model: Backbone.Model,
url: '/some/api/endpoint'
});
var Li = Backbone.View.extend({
tagName: 'li',
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('li-template').html());
this.el = template(model.toJSON());
}
});
var Ul = Backbone.View.extend({
collection:collection,
el: 'ul',
initialize: function(){
this.listItems = [];
this.collection.on('sync', this.addAll);
this.collection.on('add', this.addOne);
this.collection.on('remove', this.removeOne);
},
addAll: function(){
var frag = document.createDocumentFragment();
this.collection.forEach(function(model){
var view = new Li({model: model});
frag.appendChild(view.el);
this.listItems.push(view);
});
this.el.appendChild(frag);
},
addOne: function(model){
var view = new Li({model: model});
this.el.appendChild(view.el);
this.listItems.push(view);
},
removeOne: function(model){
for (var i = 0, num = this.listItems.length, item; i < num; i++) {
view = this.listItems[i];
if (view.model.cid === model.cid) {
this.el.removeChild(view.el);
this.listItems.splice(i, 1);
}
}
}
});
Related
This is my second day trying to use backbone and im completely lost. I am following this tutorial - http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-3/
What I have done is loaded a contacts list and rendered it to the screen, but if you look at my render1 function - this takes a form input and appends it to my template. The problem is that I can't delete these items after they are created - the others can be deleted. help please?
var ContactView = Backbone.View.extend({
tagName: "contacts",
className: "contact-container",
template: $("#contactTemplate").html(),
initialize: function(){
this.model.on('change', this.render, this);
this.model.on('add', this.render1, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click .deleteUser': 'delete'
},
test: function () {
alert("here");
},
delete: function () {
this.model.destroy();
},
render: function () {
console.log(this);
var tmpl = _.template(this.template);
$(this.el).html(tmpl(this.model.toJSON()));
temp = tmpl(this.model.toJSON());
console.log(temp);
return this;
},
render1: function () {
console.log(this);
var tmpl = _.template(this.template);
temp = tmpl(this.model.toJSON());
temp='<contacts class="contact-container">'+temp+'</contacts>';
console.log(temp);
$("#contacts").append(temp);
$(this.el).html(tmpl(this.model.toJSON()));
return this;
}
});
var AddPerson = Backbone.View.extend({
el: $("#addPerson"),
// el: $("form/"),
events: {
'click': 'submit',
'submit': 'submit'
},
submit: function(e) {
// alert("here");
e.preventDefault();
this.collection = new Directory();
// var data = (contacts[0]);
var contact = new Contact(contacts[0]);
var contactView = new ContactView({model: contact});
this.collection.add(contact);
this.collection.add(contactView);
}
});
seasick, there are quite a few issues in this code.
var contact = new Contact(contacts[0]);
var contactView = new ContactView({model: contact});
this.collection.add(contact);
this.collection.add(contactView);
Contact is a Backbone.Model but ContactView is a Backbone.View. Yet, you are adding both to the this.collection (which I assume is a Backbone.Collection of Contact?). See the problem here? In Backbone, there is no such concept of a 'collection of views'. You just get one concept: views, that are tied to a model.
So, here, you create a Contact and you add it to the Collection. That is all! It takes care of the Model part. The rendering part needs to be handled with events and renders.
When you add a model to a collection (this.collection.add(contact)), the collection will trigger a 'add' event, that you can hook to with a .on to create a new ContactView and append it to the DOM somewhere.
So when you write this...
this.model.on('add', this.render1, this);
You are actually saying 'When the Contact model triggers an add event, run render1', which isn't what you want, what you probably want is a collection.on('add', ...). The model will never trigger an add event (well, you could make it trigger one, but it wouldn't be an expected behavior!), the add/remove events are at the collection level.
In other words, you are missing some binding on the collection in your AddPerson view to 'react' to adding a new Contact to the collection. The code of the function bound to the add event should probably look a bit like:
onAdd: function(newContact){
var newContactView = new ContactView({model: newContact});
$("#contacts").append(newContactView.render().el);
}
There are other issues in your code, but I guess an outline of the steps to take would be like:
Remove the binding to add in ContactView: ContactView is only concerned with one contact, not how to manage multiple contacts. This is probably why you are having issues with only some (the first one?) of the contacts 'working'
Move that logic to the AddContact view which seems to be more concerned with the Collection of contacts. Use the collection 'add' event to create new ContactView and append them to the DOM
Hope this helps!
I've been using backbone for quite some time now, and each time I get dynamic lists of views that have their own events and behaviors, I wonder how should they be stored. I've two ways and my thoughts on them are..
Store views internally in another view. This requires overhead in proper filtering, but is sort-of independent from DOM + might have better memory usage
Just generate views, put them in DOM and trigger events of views with jquery, like $('#someviewid').trigger('somecustomfunction'); - easier to write and access but dependencies are harder to see and I'm not certain that view/model gets deleted if I just remove DOM node
What would you recommend?
So here is expanded second example, where new views are just appended to internal html and storyViews themselves are forgotten. But If I want to access specific view from this list, I would have to use DOM attributes, like id or data and then trigger view functions with jquery accessors
Devclub.Views.StoriesList = Backbone.View.extend({
initialize: function () {
this.collection.bind('reset', this.reset, this);
this.collection.fetch();
},
reset: function (modelList) {
$(this.el).html('');
var me = this;
$.each(modelList.models, function (i, model) {
me.add(model);
});
},
add: function (model) {
var contact_model = new Devclub.Models.Story(model);
var view = new Devclub.Views.Story({
model: contact_model
});
var storyView = view.render().el;
$(this.el).append(storyView);
}
});
In contrast, I could instead store same view list in an array and iterate over it if I want to call some view methods directly
I think you should keep a reference of the child views. Here is an example from the book by Addy Osmani.
Backbone.View.prototype.close = function() {
if (this.onClose) {
this.onClose();
}
this.remove(); };
NewView = Backbone.View.extend({
initialize: function() {
this.childViews = [];
},
renderChildren: function(item) {
var itemView = new NewChildView({ model: item });
$(this.el).prepend(itemView.render());
this.childViews.push(itemView);
},
onClose: function() {
_(this.childViews).each(function(view) {
view.close();
});
} });
NewChildView = Backbone.View.extend({
tagName: 'li',
render: function() {
} });
I've got a simple div into which I'd like backbone to render a select box and options from my server.
The options seem to render just fine, but the select box does not. I'm sure it's a simple tweak, but can't seem to find it.
I created a simplified fiddle for it: http://jsfiddle.net/thunderrabbit/BNZY3/
The HTML
<div id="where_fields"></div>
The script I'm using uses fetch() to get the data. The Fiddle above hardcodes the data, but the issue is the same.
(function($){
var Field = Backbone.Model.extend();
var UnitFields = Backbone.Collection.extend({
url: '/<?php echo CONFIG_ADMIN_DIR; ?>/api/fieldnames/units',
model: Field
});
var BuildingFields = Backbone.Collection.extend({
url: '/<?php echo CONFIG_ADMIN_DIR; ?>/api/fieldnames/buildings',
model: Field
});
var FieldView = Backbone.View.extend({
tagName: "option",
initialize: function(){
_.bindAll(this, 'render');
},
events: {
"click":"clicked"
},
clicked: function(e) {
var data_type = this.model.get("DATA_TYPE");
if(data_type == "varchar") {
console.log("it's a varchar");
}
if(data_type == "int") {
console.log("it's an int");
}
},
render: function(){
$(this.el).attr('value', this.model.get('COLUMN_NAME')).html(this.model.get('display_name'));
return this;
}
});
var FieldsView = Backbone.View.extend({
tagName: "select",
el: $('#where_fields'),
initialize: function(){
_.bindAll(this, 'render', 'renderItem');
this.collection.bind('reset', this.render);
},
renderItem: function(model) {
console.log('rendr item');
var fieldView = new FieldView({model:model});
fieldView.render();
$(this.el).append(fieldView.el);
},
render: function(){
console.log('rendr');
this.collection.each(this.renderItem);
return this;
}
});
var units_fields = new UnitFields();
var buildings_fields = new BuildingFields();
var unitsView = new FieldsView({collection: units_fields});
var buildingsView = new FieldsView({collection: buildings_fields});
units_fields.fetch();
buildings_fields.fetch();
})(jQuery);
Why is my backbone script not rendering the select tags?
You have both tagName and el attributes in your FieldsView class. You don't need both. Use tagName if you want to render a view detached from the DOM and then backbone will use that tag instead of the default of div. However, in your render(), you don't ever actually get a select tag involved. $(this.el) is your #where_fields div and you just append fieldView.el, which is an option element. That's why there is no select element. Some quick tips:
use this.$el as a more efficient shorthand for $(this.el)
It's preferable to keep your view loosely coupled from the DOM, so el: $('#where_fields') is not as clean a design as rendering an element detached from the DOM and letting other code decide where exactly in the existing DOM it should be attached.
So you should remove your el properly, set tagName to select if you like, then your render() method will be doing what you want with is appending options to a select tag, then move the actual code to append your view's rendered el to the #where_fields div out of the view into your router perhaps.
I'm building a simple app that implements a "faceting" or "filtering" interface -- no data writing. I want users to select facets (checkboxes) on the left to reduce the result set on the right.
I've got 2 separate collections (facets and incentive). These are being populated from a single json object that contains an array comprised of 2 items. Each 2 items help create the model, view, and collection for these two parts of the page.
I need to get events in the facet view to update the result of the incentives collection. What's the best way to connect these two together. My test app can be found here. I am using Handlebars for templating.
see it here: DEMO SITE
The Main content area is made up of "car incentive" like this.
//define Incentive model
var Incentive = Backbone.Model.extend({
defaults: {
photo: "car.png"
}
});
//define individual incentive view
var IncentiveView = Backbone.View.extend({
tagName: "article",
className: "incentive-container",
template: Handlebars.compile($("#incentive-template").html()),
initialize: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
//define Incentives collection
var Incentives = Backbone.Collection.extend({
model: Incentive,
url: 'data/incentives3.json',
parse: function(response) {
return response.incentiveHolder;
}
});
var IncentivesView = Backbone.View.extend({
el: $(".incentives-container"),
initialize: function() {
this.collection = new Incentives();
// When the contents of the collection are set, render the view.
this.collection.on('reset', function() {
incentives = this.collection.models;
this.render();
}, this);
this.collection.fetch();
this.collection.on("reset", this.render, this);
},
render: function() {
this.$el.find("article")
.remove();
_.each(this.collection.models, function(item) {
this.renderIncentive(item);
}, this);
},
renderIncentive: function(item) {
var incentiveView = new IncentiveView({
model: item
});
this.$el.append(incentiveView.render()
.el);
}
});
The facet model/collection is detailed below. You can see in FacetView -- I've registered a "change" event when a user selects a checkbox. I need to some how use this data to either 1) hide each incentive that does not contain this facet value or 2) remove the model from the FacetCollection (??). I want users to be able to quickly toggle these checkboxes on/off a bunch -- is removing/adding slower (or less efficient) then hiding/showing with css?
Also, you can see from my displayIncentives() function that "this" -- is an instance of the view -- but how do I access the "value" of the checkbox that was just clicked?
If I can get this value -- then I could examine the incentive collection, iterate over each item -- and ask it it's "incentive" array "contains" this value of the checkbox that was just click. If return false, I would hide (or remove?) the item and proceed.
// ======================================
// FACETS
// ======================================
//define Facet model
var Facet = Backbone.Model.extend({});
//define individual facet view
var FacetView = Backbone.View.extend({
tagName: "div",
className: "facet-group",
template: Handlebars.compile($("#facets-template").html()),
initialize: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
events: {
"change input[type=checkbox]": "displayIncentives"
},
displayIncentives: function() {
console.log(this);
}
});
//define Facets collection
var Facets = Backbone.Collection.extend({
model: Facet,
url: 'data/incentives3.json',
parse: function(response) {
return response.facetsHolder;
}
});
var FacetsView = Backbone.View.extend({
el: $(".facets-container"),
initialize: function() {
this.collection = new Facets();
// When the contents of the collection are set, render the view.
this.collection.on('reset', function() {
this.render();
}, this);
this.collection.fetch();
},
render: function() {
_.each(this.collection.models, function(item) {
this.renderFacet(item);
}, this);
},
renderFacet: function(item) {
var facetView = new FacetView({
model: item
});
this.$el.append(facetView.render().el);
}
});
Finally -- my json object is located here ... I have the freedom at the moment to help design how this object is structure in the next phase of this project. Any suggestions greatly appreciated.
json object
What a question! Actually many questions in one!
I can tell you the logic I'm using to perform exactly the same task, and which actually works (see here)
You basically must have 2 collections: a collection of facets, and a collection of items.
Collection of facets
At the beginning it is empty (no facets selected). When you check one, then you add it to the facet collection. When adding a facet, you filter the collection of items in some way (you can trigger an event listend by the collection of items or - better - just call a method like itemCollection.facet_filter() where facet_filter() is a method defined by you in the item collection object).
Good.
Collection of item
It's an ordinary collection. You just add a facet_filter() method which filters the list and trigger a reset event. This reset event is listened by FacetsView which re-renders the list.
the facet_filter()method should be something like this.
filter_results: function(facets){
var filteredColletion= new Backbone.Collection(this.models);
_.each(facets,function(facet){
filteredColletion.where({facet.key: facet.value});
});
this.reset(returnList);
}
}
This is the logic I use and it works.
I'm doing my first application in backbone and i get a strange thing happening trying to attach an event.
I got this code so far:
//View for #girl, EDIT action
GirlEditView = Backbone.View.extend({
initialize: function(el, attr) {
this.variables = attr;
console.log(attr);
this.render();
},
render: function() {
var template = _.template( $("#girl_edit").html(), this.variables );
$(this.el).html( template );
$("#edit_girl").modal('show');
}
});
//View for #girl
GirlView = Backbone.View.extend({
initialize: function(el, attr) {
this.variables = attr;
this.render();
},
render: function() {
var template = _.template( $("#girl_template").html(), this.variables );
$(this.el).html( $(this.el).html() + template );
},
events: {
"click p.modify": "modify"
},
modify: function() {
//calls to modify view
new GirlEditView({el : $("#edit_girl")}, this.variables);
}
});
//One girl from the list
Girl = Backbone.Model.extend({
initialize: function() {
this.view = new GirlView({el : $("#content")}, this.attributes );
}
});
//all the girls
Girls = Backbone.Collection.extend({
model: Girl,
});
//do magic!
$(document).ready(function() {
//Underscore template modification
_.templateSettings = {
escape : /\{\[([\s\S]+?)\]\}/g,
evaluate : /\{\[([\s\S]+?)\]\}/g,
interpolate : /\{\{([\s\S]+?)\}\}/g
}
//get initial data and fill the index
var list = [];
$.getJSON('girls.json', function(data) {
list = [];
$.each(data, function(key, val) {
list.push( new Girl(val) );
});
var myGirls = new Girls(list);
console.log( myGirls.models);
});
});
As you can see.
I'm using a collection to store all the girls and the data comes from a REST api in ruby.
Each girls create a new model instance and inside i attached a view instance.
I don't know if it's a good practice but i can't think a better way to do it.
Each view makes a content with a unique id. girl-1 girl-2 and go on.
Now, the template have a edit button.
My original idea is to attack the onclick event and trigger the edit view to get rendered.
That is working as expected.
The proble so far is:
When the events triggers, all the collection (girls) fire the edit view, not the one that "owns" the rendered view.
My question is what i'm doing wrong?
Thanks a lot
All the edit-views come up because all the GirlViews are using the same el:
this.view = new GirlView({el : $("#content")}, this.attributes );
and then you render be appending more HTML:
render: function() {
var template = _.template( $("#girl_template").html(), this.variables );
$(this.el).html( $(this.el).html() + template );
}
Backbone events are bound using delegate on the view's el. So, if multiple views share the same el, you'll have multiple delegates attached to the same DOM element and your events will be a mess of infighting.
You have things a little backwards: models do not own views, views watch models and collections and respond to their events. You'll see this right in the documentation:
constructor / initialize new View([options])
[...] There are several special options that, if passed, will be attached directly to the view: model, collection, [...]
Generally, you create a collection, c, and then create the view by handing it that collection:
var v = new View({ collection: c })
or you create a model, m, and then create a view wrapped around that model:
var v = new View({ model: m })
Then the view binds to events on the collection or model so that it can update its display as the underlying data changes. The view also acts as a controller in Backbone and forwards user actions to the model or collection.
Your initialization should look more like this:
$.getJSON('girls.json', function(data) {
$.each(data, function(key, val) {
list.push(new Girl(val));
});
var myGirls = new Girls(list);
var v = new GirlsView({ collection: myGirls });
});
and then GirlsView would spin through the collection and create separate GirlViews for each model:
var _this = this;
this.collection.each(function(girl) {
var v = new GirlView({ model: girl });
_this.$el.append(v.render().el);
});
Then, GirlView would render like this:
// This could go in initialize() if you're not certain that the
// DOM will be ready when the view is created.
template: _.template($('#girl_template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON());
return this;
}
The result is that each per-model view will have its own distinct el to localize the events. This also makes adding and removing a GirlView quite easy as everything is nicely wrapped up in its own el.