I noticed something odd with Backbone/Marionette. When I create an instance of a view that has a new collection property, then I create a nother instance of the view, its a new instance but the collection property points to the instance of the first view. See here:
var CollectionView = Marionette.CollectionView.extend({
collection: new Backbone.Collection()
});
var view = new CollectionView();
console.log('view is ', view);
view.collection.searchTerm = 'test';
console.log('view.collection is ', view.collection);
this.region.show(view);
var view2 = new CollectionView();
console.log('view2 is ', view2);
console.log('view2.collection is ', view2.collection);
this.region.show(view2);
You can see in the logs, there are 2 difference view instances (one has cid: "view2" and the other cid: "view5"). But the collection property of the second view has a property searchTerm which is 'test'. I would have expected this to be a new Backbone collection....
Codepen is here.
It is expected behavior.
Collection is created only once, when you're calling extend. All instances just have collection reference in prototype of CollectionView.
If you want your view instantiated with new collection every time, just create initialize method:
var CollectionView = Marionette.CollectionView.extend({
initialize: function () {
this.collection = new Backbone.Collection();
}
});
var view = new CollectionView();
console.log('view is ', view);
view.collection.searchTerm = 'test';
console.log('view.collection is ', view.collection);
this.region.show(view);
var view2 = new CollectionView();
console.log('view2 is ', view2);
console.log('view2.collection is ', view2.collection);
this.region.show(view2);
Related
I reorganized my fully-working Backbone.js project and moved all my models, collections and views into separate files, and did a little rewriting, and now it won't render. I've tried everything I can think of. Any tips?
var SessionView = Backbone.View.extend({
model: Session,
el: '#list',
template: _.template($('#session-template').html()),
initialize: function () {
this.model.bind('change', _.bind(this.render, this));
this.render();
},
render: function () {
this.$el.html(this.template({sessions: sessionList}));
return this;
}
});
var sessionView = new SessionView();
var SessionListView = Backbone.View.extend({
el: '#list',
model: sessionList,
initialize: function () {
sessionList.bind('add', this.add, this);
sessionList.bind('reset', this.add, this);
sessionList.fetch();
},
render: function () {
var view = new sessionListView();
this.$el.append(view.render().el);
new SessionView({model: Session});
return this;
}
});
var sessionListView = new SessionListView();
Few things that I noticed:
Backbone.View does not have a model property. Only Backbone.Collection has a model property, which backbone will use to create an instance of model using the specified model constructor (blueprint) and data passed to it.
But views doesn't have a functionality like this (as far as I know). People usually pass an instance of a specific type of model with the options while creating a view, that's not the same as specifying a model property which points to a model constructor in the View's constructor.
sessionList doesn't seems to be an instance of a model (since it is specified in the view's constructor. If it's an instance it'll be shared by all the SessionListView instances which is not the desired behavior in most cases) and seems to be undefined
in the following:new SessionView({model: Session}); Session doesn't look like an instance of a model (Doesn't start with a capital letter, hoping you're following naming conventions) and also seems to be undefined
Well nothing is stopping you from specifying a model constructor in view's constructor or passing a model constructor into the view, but then you should make an instance of it (mostly while initializing) inside the view to work with. In other words you can not do blueprintOfAModel.bind('change'..); and you should build an actual model for the view to work with.
You seems to be creating new SessionListView in the render method of SessionListView itself with var view = new sessionListView(); won't that create infinite number of SessionListView instances when you simply try to create one..?
Well by looking at it again, you are not calling the actual constructor SessionListView with the new operator, but with an instance of it (sessionListView) which is likely to throw an error.
Both SessionView and SessionListView points to the same element, which seems weird. I haven't seen people doing that before since modifying the el of one view will have an impact on the other view, which is not desired in most practical cases.
Also judging by the names, since you have a list view of session, SessionView should not be pointing to a particular element with an id selector. You should create a new element for each SessionView instance. Backbone will do that for you if you don't specify el property.
(I'd say you created an unintentional mess that wasn't there with a little rewrite :)
To make sense, your code should look somewhat like the following. Note that things starting with capital letter are constructor functions and things starting with small letters are object instances
var Session = Backbone.Model.extend({
defaults: {},
initialize: function() {}
});
var SessionList = Backbone.Collection.extend({
model: Session,
initialize: function() {}
});
var SessionView = Backbone.View.extend({
initialize: function() {
this.model.bind('change', _.bind(this.render, this));
this.render();
},
template: _.template($('#session-template').html()),
render: function() {
this.$el.html(this.template({
session: this.model
}));
return this;
}
});
var SessionListView = Backbone.View.extend({
el: '#list',
initialize: function() {
this.collection.bind('add', this.add, this); // method doesn't exist, should throw error
this.collection.bind('reset', this.add, this); // same here
this.collection.fetch(); // <--- watch out, this happens asynchronously
},
render: function() {
// iterate through collection, create instances of SessionView and append to el
return this;
}
});
var sessionList = new SessionList(); // will create n number of Session instances in future
var sessionListView = new SessionListView({ // will create n number of SessionView instances in future
collection: sessionList
});
I can't seem to get a test backbone.js app working and I have no idea what I am doing wrong.
http://jsbin.com/iwigAtah/1/edit
I modified your code a little bit and here's what I came up with.
// Backbone Objects
var Item = Backbone.Model.extend({});
var List = Backbone.Collection.extend({
model: Item
});
var ListView = Backbone.View.extend({
initialize: function(options){
// collection is now passed in as an argument
// this line isn't necessary but makes it easier to understand what is going on
this.collection = options.collection;
console.log(this.collection.models);
}
});
// Create a new empty collection
var test = new List();
// Create a new item model and add it to the collection
var testItem = new Item();
test.add(testItem);
// Create a view with your new collection
var g = new ListView({
collection: test
});
The main issue you were having is that you weren't actually adding your model to the collection.
Lets suppose I have a big collection and I want to use a subset of this big collection for different view.
I tried the following code but it does not work because the filtered collection actually is a new one and it does not refer to the BigCollection instance.
My question is:
how can I get a collection which is a subset of BigCollection instance?
Here is my code. Please see the comments for more info:
// bigCollection.js
var BigCollection = Backbone.Collection.extend({
storageName: 'myCollectionStorage',
// some code
});
// firstView.js
var firstView = Marionette.CompositeView.extend({
initialize: function(){
var filtered = bigCollection.where({type: 'todo'});
this.collection = new Backbone.Collection(filtered);
// the issue is about the fact
// this.collection does not refer to bigCollection
// but it is a new one so when I save the data
// it does not save on localStorage.myCollectionStorage
}
});
Use BigCollection to make filtered collection, like this :
// firstView.js
var firstView = Marionette.CompositeView.extend({
initialize: function(){
var filtered = bigCollection.where({type: 'todo'});
this.collection = new BigCollection(filtered);
// now, it will save on localStorage.myCollectionStorage
}
});
You could just save your original models in a variable inside your collection so you can restore them after you de-apply the filter, like this:
// bigCollection.js
var BigCollection = Backbone.Collection.extend({
storageName: 'myCollectionStorage',
// some code
});
// firstView.js
var firstView = Marionette.CompositeView.extend({
initialize: function(){
bigCollection.original_models = bigCollection.models;
bigCollection.models = bigCollection.where({type: 'todo'});
}
});
And then you can restore them when you toggle the filter:
bigCollection.models = bigCollection.original_models;
I need to fetch data having a specific id
and which id is defined in the view instance.
Here the example, see the comments in MyModel definition:
// my view instance
var myView = new MyView({
model: {id: 12321}
});
MyView = Backbone.View.extends({
initialize: function()
{
myModel.fetch();
}
});
MyModel = Backbone.Model.extends({
url: function url ()
{
// how to get the id passed to view instance?
return "http:..../id/" + this.id;
}
});
Model should not has any knowledge of the existence of the View, so the View should be the one that sais to the Model which id to fetch:
MyView = Backbone.View.extends({
initialize: function()
{
myModel.id = this.model.id;
myModel.fetch();
}
});
(I've used your example code as template for my example, but I have to say I feel several weird things on it, I suppose is just a matter of taste)
Update: My very personal taste opinions
Is very difficult to do this but as you requested I'll share with you my very personal code review of your example code. Take this as it is: a very humble opinion.
this.model confused
I would not use attribute names that can create confussion:
var myView = new MyView({
model: {id: 12321}
});
Into this instance this.model is making reference to a raw Hash but in a Backbone context this is against the intuitive feeling that this is gonna be a Backbone.Model.
I rather change it for something like this:
var MyView = Backbone.View.extend({
initialize: function( opts ){
this.model_id = opts.model_id;
}
})
var myView = new MyView({ model_id: 12321 });
I think this naming is more intuitive.
close variables scopes
This code can only works if myModel is in an scope bigger that it should be:
MyView = Backbone.View.extends({
initialize: function()
{
myModel.fetch();
}
});
I rather prefer using more encapsulated scopes, even if myModel has been declared in the out-side context of your View the View should use a variable of its private context. For example
var MyView = Backbone.View.extends({
initialize: function( opts ) {
this.model = opts.model;
this.model.fetch();
}
});
var myView = new MyView({ model: myModel });
Check the detail that I have also added var in front of MyView because if not MyView will be a window global variable.
use the Backbone urlRoot
In your example, this ...
MyModel = Backbone.Model.extends({
url: function url ()
{
// how to get the id passed to view instance?
return "http:..../id/" + this.id;
}
});
... can be summarized as this:
MyModel = Backbone.Model.extends({
urlRoot: "http:..../id"
});
This is a general question about backbone.js and javascript, I'm intermediate in javascript:
If you have a collection of models, each connected to an instance of a view, is each model instance's view instance containing a full instance of the view's render method? If so, what is recommended way to ensure that the render method is 'static', so that memory is not wasted if each model instance requires the exact same render function?
In the example below, does each hat instance also contain an instance of the render function, or is it pointing to a 'static' render function?
var Hat = Backbone.Model.extend({});
var HatCollection = Backbone.Collection.extend({
model : Hat,
});
var HatView = Backbone.View.extend({
render : function() {
// output the hat's html
}
});
var hats = new HatCollection([ new Hat(), new Hat(), new Hat()])
hats.each(function(hat) {
hat.view = new HatView({ model : hat });
});
There are no real "static" or "class" methods in Javascript. What you have is a method defined on the class's prototype.
When you use Backbone.View.extend(), everything you pass is added to the prototype, so they are indeed what you would call "static" methods.
Just check if the render method is a member of the instance or the prototype:
(function () {
var HatView = Backbone.View.extend({
render : function() {
console.log("rendering a hat...");
}
});
var hview = new HatView();
console.log(hview.hasOwnProperty("render")); // false
console.log(hview.render === HatView.prototype.render); // true
}());