In my application I have a case of two views sharing the same model.
I am having trouble when I am accessing the collection through the model and removing the model from the collection. The problem is that after calling this.model.collection.remove(this.model) the view's reference this.model is undefined.
The reason I am not unbinding the events before removing is, that I need mySecondView to be able to know about the remove event inorder to remove it's self from the DOM.
MyView = Backbone.View.extend({
events : {
'click .delete' : deleteModel
}
initialize : function() {
this.model.on('remove', this.dispose, this)
},
deleteModel : function() {
if( this.model.isNew() )
{
this.model.collection.remove( this.model );
//remove all the events bound to the model
this.model.unbind(); //this.model is undefined
this.dispose();
}
}
});
MySecondView = Backbone.View.extend({
initialize : function() {
//call the custom dispose method to remove the view
this.model.on('remove', this.dispose, this );
}
});
myModel = new Backbone.Model();
myCollection = new Backbone.Collection( myModel );
myView = new MyView({ model : myModel });
mySecondView = new MySecondView({ model : myModel });
The only way that works is by creating a local variable reference to the model in deleteModel
Any Suggestions?
The problem was a programming mistake.
When calling the this.model.collection.remove( this.model ); a remove event was called on the model which was bound to the dispose method which removed any local references to the model. Hence the reference to the model was lost.
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 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"
});
I have the following code:
var GoalPanelView = Backbone.View.extend({
// Bind to the goal panel DOM element
el: $("#sidebar-goals"),
// Initialize the collection
initialize: function() {
this.collection = Goals;
this.collection.bind('add', this.appendItem);
},
// Create a new goal when a user presses enter in the enter goal input
createOnEnter: function(e) {
if (e.keyCode != 13) return;
this.addItem();
//Goals.create(this.newAttributes());
},
// Add the goal item to the goal list
addItem: function() {
var goal = new Goal();
goal.set(this.newAttributes());
var goalsElem = this.el;
this.collection.add(goal);
$(this.el).children("#enter-goal").val('');
},
// Append DOM element to the parent el
appendItem: function(item) {
var goalView = new GoalView({
model: item,
});
$(this.elem).append(goalView.render().el);
}
});
My problem is inside of the appendItem function. When I use this inside of the appendItem function, I believe that it thinks that the this refers to the this.collection rather than the GoalPanelView. How would I get the this to refer to the GoalPanelView rather than the collection? I tried to pass another variable into the appendItem function which held the contents of this.elem, but it didn't seem to work.
One thing that worked was when I moved the appendItem function into the collection and changed the initialization to bind to this.collection.bind('add', appendItem); but I do not want to put the view stuff into the collection logic.
You can add a scope when binding an event handler, like so:
this.collection.bind('add', this.appendItem, this);
The scope sets the value of this inside the handler. In you case, the current object.
Edit: Javascript Garden has a great explaination why this.appendItem does not actually carry the scope of the function itself, it's just a function pointer, not a method pointer. One of the quirks of Javascript..
Edit 2 Backbone Reference - Events / on
Just to update (as of Backbone 0.9.2), the proper way to do this is:
initialize: function() {
this.collection.on("add", this.appendItem, this);
...
}
Depending on your use case, you may also want to consider:
initialize: function() {
this.listenTo(this.collection, "add", this.appendItem);
...
}
You can also use underscore's _.bindAll function in your initialize method:
initialize: function() {
_.bindAll(this);
this.collection = Goals;
this.collection.bind('add', this.appendItem);
}
Now any call to any method on GoalPanelView (e.g. appendItem) will be scoped such that references to this refer to the GoalPanelView instance.
You can also pass in a list of method names as strings if you don't want to scope all the methods of GoalPanelView
See here: http://underscorejs.org/#bindAll
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
}());
I'm learning Backbone.js and am trying to figure out whether it's possible to have instance variables in Backbone views.
My goal is to load a view's templates from an external file when a view is being instantiated. Currently I'm storing them in a global variable in the Backbone app's global namespace, but it would be cleaner to store the templates in a view's instance variables. Currently I have it set up like this:
var templates = {};
MessageView = Backbone.View.extend({
initialize: function() {
$.get('js/Test2Templates.tpl', function(doc) {
var tmpls = $(doc).filter('template');
templates['MessageView'] = [];
tmpls.each(function() {
templates.MessageView[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));
});
});
},
render: function() {
var tpldata = {name: 'Ville', thing: 'Finland'};
$('#display').jqoteapp(templates.MessageView.greeting_template, tpldata);
},
events: {
"click input[type=button]": "additionalTransactions"
},
additionalTransactions: function() {
this.render();
}
});
But instead of using "templates" being defined as a global var, I'd like to create 'templates' in a view's initialize function, along these lines (but this doesn't work):
MessageView = Backbone.View.extend({
view_templates: {},
initialize: function() {
$.get('js/Test2Templates.tpl', function(doc) {
var tmpls = $(doc).filter('template');
tmpls.each(function() {
this.view_templates[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));
});
});
},
render: function() {
var tpldata = {name: 'Ville', thing: 'Suomi'};
$('#display').jqoteapp(this.view_templates.greeting_template, tpldata);
},
events: {
"click input[type=button]": "additionalTransactions"
},
additionalTransactions: function() {
this.render();
}
});
This is probably (?) pretty straightforward and/or obvious, but me being somewhere on the Backbone.js learning curve, I'd much appreciate any help with this!! Thanks!
Your view_templates instance variable is fine (and a good idea as well). You just have to be sure that you're using the right this inside your $.get() callback and inside your tmpls.each() call. I think you want your initialize to look more like this:
initialize: function() {
this.view_templates = { };
var _this = this;
$.get('js/Test2Templates.tpl', function(doc) {
var tmpls = $(doc).filter('template');
tmpls.each(function() {
_this.view_templates[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));
});
});
},
I'm not sure which this.id you want inside the tmpls.each() but I'm guessing that you want the DOM id attribute from the current template so I left it as this.id.
The this.view_templates assignment in your constructor (initialize) is needed because you presumably want each instance of the view to have its own copy of the array. Creating a new view instance doesn't do a deep copy of the the view so if you just have:
MessageView = Backbone.View.extend({
view_templates: {},
// ...
then all the instances will end up sharing the same view_templates object and view_templates will behave more like a class variable than an instance variable.
You can specify your instance variables in the view definition (i.e. the Backbone.View.extend() call) as a form of documentation but you will want to initialize any of them that should behave as an instance variable in your initialize method; read-only or "class variables" like events can be left as part of the view's definition.