I'm trying to figure out a way to keep my private functions and helper methods truly private. Each object should only publicize what is allowed to be called externally (radical, I know!). I'm having a hard time doing this with Backbone views in a way that:
Doesn't sacrifice readability
Doesn't involve a lot of boilerplate
Doesn't have any unintended consequences
Here's my general View structure:
(function(){
//Private function no other view needs to care about
var addStuffToMyDom = function(model){
var newView = new Subview({model: model});
//Problem: this doesn't refer to the 'view' here
this.$el.append(newView.render().$el);
}
//Another trivial function which should really be private
var doSomeThingTrivial = function(){
this.$el.addClass("meh");
}
return BaseView.extend({
events: {
"click": doSomeThingTrivial
},
render: function(){
var me = this;
this.collection.each(addStuffToMyDom);
return this;
}
});
}());
As you can see the private functions can't reference 'this' to append themselves to.
Solution 1:
(function(){
var me;
...
return BaseView.extend({
initialize: function(){
me = this;
}
});
}());
This has a lot of subtle side-effects + would be annoying to have to do this every time.
Solution 2:
(function(){
var me;
...
return BaseView.extend({
events{
"click" : function(){
doSomeThingTrivial.call(this);
}
}
});
}());
This works, but it's a lot of boilerplate for messy code.
Solution 3:
(function(){
return BaseView.extend({
events: {..}
initialize: function(){
_.bindAll(this, this.events);
}
});
}());
I like this the best; this works, is fairly readable and works as advertised, but again, is one extra step to do for each view. Any other solutions I'm missing?
You can pass the context you want to use to the each method:
this.collection.each(addStuffToMyDom, this);
Now this will be your view inside addStuffToMyDom.
I thought when you use the Backbone events hash to hook up events, it did something similar. Are you sure this is not the view inside doSomeThingTrivial?
If you look at Backbone delegateEvents, it does this:
method = _.bind(method, this);
Where this is your view.
Discovered that _.bindAll(this) in the initializer fixes scope issues in the private function. I've grown less convinced of this design pattern since I asked this question, but it does solve it :)
(function(){
//Private function no other view needs to care about
var addStuffToMyDom = function(model){
var newView = new Subview({model: model});
//Problem: this doesn't refer to the 'view' here
this.$el.append(newView.render().$el);
}
//Another trivial function which should really be private
var doSomeThingTrivial = function(){
this.$el.addClass("meh");
}
return BaseView.extend({
events: {
"click": doSomeThingTrivial
},
initialize: function(){
_.bindAll(this);
}
});
}());
Related
I'm splitting up my working Backbone.js application, into separate files for models, views and routers.
in my Router, I create a Model, perform its .fetch() and expect to reach the callback function. This, however, never happens.
return Backbone.Router.extend({
self : this,
initialize: function(){
require(['models/mymodel'],
function(MyModel) {
var myModel = new MyModel();
myModel.fetch({ success: self.callback, error: self.callback });
console.log(myModel.get('myAttr'));
//prints 'undefined', although can be seen in model.attributes
}
);
},
callback: function(){
console.log('Callback reached!); //is never printed
}
});
models/mymodel.js:
define(function (require) {
"use strict";
var $ = require('jquery'),
Backbone = require('backbone');
return Backbone.Model.extend({
url: function(){
return '/apicall';
}
});
});
One major problem in your code is this bit:
self : this,
The self field will be created in the object literal but not to a value which is sensible for what you want to do. (And how would you get this value anyway?) At the beginning of your initialize function. Removing the line above from your code and setting self like this at the beginning of initialize should give you what you want:
initialize: function(){
var self = this;
// The rest is identical.
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
I am attempting to add some functions to backbone so that I can communicate with mongodb. Now I know this won't work client side; however, I do like backbone's functionality for server side model logic as well. I noticed that I would be doing a bunch of repeat work if I kept adding the same functionality for each model so decided to create a "app_model" file to extend backbone when I'm server side. I also don't want to override the standard Backbone functions because they will be useful client side.
So let's take this user class for instance:
var Backbone = require('./app_model');
var User = Backbone.Model.extend({
name : "users",
defaults: function() {
return {
username: "default",
role: 2,
created: new Date(),
updated: new Date(),
logged: new Date()
};
},
idAttribute: "username",
/**
* A predefined listing of user roles
*/
userRoles: [
"admin", //0
"author", //1
"user" //2
],
initialize: function() {
if(!!app) {
this.svrInit();
}
}
});
module.exports = User;
And I want to append functions onto backbone by using my "app_model.js" file, which looks something like this currently:
var Backbone = require('backbone'),
Deferred = require('Deferred'),
when = Deferred.when;
Backbone.Model.prototype.svrInit = function() {
//TODO: perhaps the code below should be made static some how so we don't have a bunch of instances of collection
var model = this;
if(!!app.db){
app.db.collection(this.name,function(err,collection){
model.collection = collection;
});
}
};
Backbone.Model.prototype.svrSave = function() {
var model = this.toJSON();
var dfd = new Deferred();
this.collection.insert(model, {safe:true}, function(err, result){
dfd.resolve();
});
return dfd;
};
Backbone.Model.prototype.svrFind = function(options) {
var model = this.toJSON();
var dfd = new Deferred();
this.collection.find(options, {safe:true}, function(err, result){
dfd.resolve();
});
return dfd;
};
module.exports = Backbone;
I ran my tests when I abstracted this out and it seemed to work alright. Is there a better way to do any of this? Any pit falls? I am using the global "app" variable, is that bad? If so what are some ways around it? I do find it ugly that I had to put this.svrInit() inside the init function at the model level is there anyway to automatically make that happen after creation?
So I've been thinking about this question for a couple days and I the cleanest thing I've come up with is something like this:
var MyModel = function( attributes, options ) {
Backbone.Model.apply( this, arguments );
this.specialInitializer();
};
MyModel.extend = Backbone.Model.extend;
_.extend( MyModel.prototype, Backbone.Model.prototype, {
specialInitializer: function() {
// called after the users 'initialize'
console.log("MyModel initialized.", this);
},
otherNewMethod: function() {
// this is just like any other instance method,
// just as if Backbone.Model implemented it
}
} );
So what this does is basically make an entirely new 'kind' of Backbone.Model. One which also calls specialInitializer. If you look at the backbone source just after the constructor definition for Backbone.Model you'll see this is a similar strategy.
Construct the instance.
Call an initializer the implementor is supposed to define.
Extend the prototype with functionality (in their case Backbone.Events, in ours, Backbone.Model).
Your new initializer can of course call whatever else it needs, etc.
As for your other questions about the static collection stuff and global app variable, I'm afraid I don't follow exactly what is going on there since I don't see a definition for app and don't know what you're using the collection for.
Here's a fiddle that demonstrates this with some extra logging and such.
I'm working on a fairly large code-base with 4-5 levels of inheritance in the views. This is the pattern I'm using:
var BaseView = Backbone.Model.extend({
somefunc: function() {
//contents
},
otherfunc: function(a,b,c) {
//contents
},
//...
});
var User = BaseView.extend({
// things in user view can now access somefunc and otherfunc
});
Here's a quick example in a jsfiddle (note the doSearch function being inherited)
I need to call the initialize method of the parent class, from inside the inherited MyModel-class, instead of completely overwriting it as I am doing today.
How could I do this?
Here's what my code looks right now:
BaseModel = Backbone.Model.extend({
initialize: function(attributes, options) {
// Do parent stuff stuff
}
});
MyModel = BaseModel.extend({
initialize: function() {
// Invoke BaseModel.initialize();
// Continue doing specific stuff for this child-class.
},
});
Try
MyModel = BaseModel.extend({
initialize: function() {
BaseModel.prototype.initialize.apply(this, arguments);
// Continue doing specific stuff for this child-class.
},
});
MyModel = BaseModel.extend({
initialize: function() {
MyModel.__super__.initialize.apply(this, arguments);
// Continue doing specific stuff for this child-class.
},
});
This worked for me, when I was trying to inherit among my models:
MyModel.prototype.initialize.call(this, options);
Referenced from http://documentcloud.github.com/backbone/#Model-extend
Thanks.
I think it'd be
MyModel = BaseModel.extend({
initialize: function() {
this.constructor.__super__.initialize.call(this);
// Continue doing specific stuff for this child-class.
},
});
this seems to be almost a duplicate of Super in Backbone, so you want something like this:
Backbone.Model.prototype.initialize.call(this);
Similar to #wheresrhys, but I would use apply instead of call in case BaseModel.initialize is expecting arguments. I try to avoid processing the attributes map that can be passed to a Backbone Model upon initialization, but if the BaseModel were actually a View or a Collection then I might want to set options.
var MyModel = BaseModel.extend({
initialize: function() {
this.constructor.__super__.initialize.apply(this, arguments);
// Continue doing specific stuff for this child-class.
},
});
here's a multi generation callSuper method, just add it to your extending class.
callSuper: function (methodName) {
var previousSuperPrototype, fn, ret;
if (this.currentSuperPrototype) {
previousSuperPrototype = this.currentSuperPrototype;
// Up we go
this.currentSuperPrototype = this.currentSuperPrototype.constructor.__super__;
} else {
// First level, just to to the parent
this.currentSuperPrototype = this.constructor.__super__;
previousSuperPrototype = null;
}
fn = this.currentSuperPrototype[methodName];
ret = (arguments.length > 1) ? fn.apply(this, Array.prototype.slice.call(arguments, 1)) : fn.call(this);
this.currentSuperPrototype = previousSuperPrototype;
return ret;
}
You might consider rewriting your code using functional inheritance.
var BackBone=function(){
var that={};
that.m1=function(){
};
return that;
};
var MyModel=function(){
var that=BackBone();
var original_m1=that.m1;
//overriding of m1
that.m1=function(){
//call original m1
original_m1();
//custom code for m1
};
};
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.