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
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 have to use the guid variable in the render() function, but I can pass it only to the constructor. I this code:
app.views.CompanyView = Backbone.View.extend({
el: '#company-view',
guid: '',
initialize: function (options) {
this.guid = options.guid;
},
render: function () {
var guid = this.guid;
}
});
I create my view like this:
app.currentView = new app.views.CompanyView({guid: guid});
Then I pass the render() function as a parameter to use it as a callback:
function call(callback){
callback();
}
call(app.currentView.render);
I tried this.guid, options and this.options too, but all of them were undefined. Is there a way to pass this variable to the render() function without using it's arguments or global variables? Here is a JsFiddle example.
When you call render through this:
function call(callback){
callback();
}
You're calling it as a plain function so this inside render will be window. Remember that this in JavaScript depends on how the function is called, not how it is defined (unless of course you're playing with bound functions).
You have some options:
Bind render to the view using _.bindAll, _.bind, $.proxy, Function.bind, ...
initialize: function() {
_.bindAll(this, 'render');
}
Demo: http://jsfiddle.net/ambiguous/GsUfY/
The more common approach these days is to pass a context with the function and then whoever calls the callback uses the appropriate context using call or apply:
function call(callback, context){
callback.apply(context);
}
Demo: http://jsfiddle.net/ambiguous/LnwPr/
Do it yourself by hand:
call(function() { v.render() });
This one usually takes the form of var _this = this; followed by an anonymous function that uses _this.some_method() instead of just passing this.some_method as a callback.
Demo: http://jsfiddle.net/ambiguous/K2Xj4/
I prefer the second option.
I see. When your render() is called by the callback function, the caller of the method is no longer the view itself, so the "this" inside your render will be the caller of the call function().
see this fiddle:
http://jsfiddle.net/cn8nN/2/
var CompanyView = Backbone.View.extend({
initialize: function (options) {
this.guid = options.guid;
},
render: function () {
console.log('hello');
console.log(this);
}
});
var v = new CompanyView({guid: 'the guid'});
function call(callbcak) {
callbcak();
}
call(v.render);
if you open the console, you will see "this " is actually the window.
to work around this, you want to bind the context to the view it self.
to do that, use _.bindAll();
initialize: function (options) {
_.bindAll(this, "render");
this.guid = options.guid;
}
jsfiddle: http://jsfiddle.net/cn8nN/3/
I am trying to learn Backbone.js.
In my app which uses Backbone with RequireJS, I have the following code;
define([
'base/BaseView',
'model/BaseModel',
], function(BaseView,
BaseModel){
var myView = BaseView.extend({
initialize: function() {
this.Summary = new resultSummary({
scenId : this.options.scenario.get("scenId")
});
},
renderCount : function(){
var self = this;
var currentStatus = self.model.get("myStatus");
}
render: function () {
var self = this;
var gridItems = [];
gridItems.push({
id: "company.status",
text: "Status",
width: "200px",
renderer: function() {
var partnerStatus = this.company.get("status");
}
});
}
}
});
I am not very clear with a few concepts;
What exactly would "this" represent when we say var self = this (I would like to understand this as a general question as well meaning when we use "this" anywhere in JS code)
Does "this" change if we are inside initialize Vs when we are in renderCount Vs when we are in "render" in the above code?
For the code "this.company.get("status")", what exactly does this.company represent? Is that referring to model ?
I think you are asking about closure?
we assign
var self = this;
so we can retain the scope of the class inside a nested function. on this case:
renderer: function() {
var partnerStatus = this.company.get("status");
}
Here's a great read: "Closures - JavaScript | MDN"
I probably won't be able to answer all the questions, since code in question is probably copied from larger code base.
Why do we use var self = this; and what exactly would this represent when the above code is executed ?
var self = this; is used to avoid scoping problems. Sometimes, when you use callbacks, this might change to some other object. Code mentioned in question doesn't benefit from it in any way this could be used directly.
Example when it is usefull - lets say, we need to listen to changes in model, and we want to attach handler in initialize method and call some logic from view on changes:
// view code
initialize: function() {
console.log(this); // 'this' points to view
this.listenTo(this.model, "change", function() {
console.log(this); // 'this' points to model
// calling 'this.someLogic();' would throw exception
});
},
someLogic: function() {
// ..
}
To avoid problem described in first example, you need to store 'this' from view context in some other variable (don't have to be named self).
Rewritten example:
// view code
initialize: function() {
console.log(this); // 'this' points to view
var self = this; // store this into variable that will won't be changed in different scope
this.listenTo(this.model, "change", function() {
console.log(this); // 'this' points to model
console.log(self); // 'self' points to view
self.someLogic(); // won't throw
});
},
someLogic: function() {
// ..
}
I recommend you to check how closures in JavaScript work. It is usefull not only for Backbone, but for JavaScript development in general.
Does "this" change if we are inside initialize Vs when we are in renderCount Vs when we are in "render" in the above code?
No, Backbone will point 'this' to view object, which contains those methodd.
For the code "this.company.get("status")", what exactly does this.company represent? Is that referring to model ?
No idea really, I can only guess, that it is some property from BaseView
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.
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.