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
Related
I'm using KnockoutJS to develop a plugin based on viewmodels. Is there any way to access the functions and properties of another viewmodel running in the same application? Something like this:
My view model:
function myViewModel()
{
this.prop1 = ko.observable(123);
this.prop2 = ko.observable("Hello");
..
..
}
myViewModel.prototype.func1 = function() {
//do something...
};
myViewModel.prototype.func2 = function() {
//do something...
};
And the other view model:
function otherViewModel()
{
this.propA = ko.observable(456);
this.propB = ko.observable("Goodbye");
..
..
}
otherViewModel.prototype.funcA = function() {
//do something...
};
otherViewModel.prototype.funcB = function() {
//do something...
};
The observables of the otherViewModel control certain common functions like pop-ups and masks. Is there any way to instantiate otherViewModel in myViewModel and set those properties?
Or is there any way to globally get and set them?
Please tread lightly as I'm very new to this paradigm. Thank you.
I agree with the comment to use scopes - but there are a couple of quick and dirty ways...
when you instantiate myViewModel - you could instantiate it on the window - and then reference it directly
window.myViewInstance = new myViewModel()
function myOtherViewModel () {
this.propA = myViewInstance.xyz
}
I use this method when I have something that provides global functionality that I want to use elsewhere. Its what jQuery and ko do... bind $ and ko to the window.
if myViewModel.xyz = ko.observable() then passing it without parens passes it as an observable - which will change as its value changes. With the parens will pass the result at the time it is evaluated.
Alternatively - you can reference it using ko.dataFor like this.
myViewModel () {...}
instance = new myViewModel
ko.applyBindings(instance, $('div')[0])
// this applies bindings of myViewModel to the first div on the page only
myOtherViewModel () {
this.propA = ko.dataFor($('div')[0])
// passes the entire object
this.propB = ko.dataFor($('div')[0]).xyz
// gives you just one property
}
Which would scope your object to just a part of the page
I am attempting to move away from spaghetti code in my jQuery plugins and work in a more structured manner.
I am doing so by using the basic boilerplate template found here: https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js
I also found the ToDo MVC plain jQuery code a source of inspiration because it doesn't chain many functions and keeps things nicely separated (I am not allowed to post more than two links due to my lack of status, so you will have to Google that yourself).
All in all I find a combination of the two above quite good to work with, but there seems to be no way to work like this without referencing this (the root plugin object) quite often. This in itself is not an issue, but sometimes this becomes out of scope. I haven't really found an elegant way around it, especially when binding event handlers via jQuery on.(). Please see my JSFiddle for an illustration of what I mean: http://jsfiddle.net/hendrikdegraaf/wzp3ok4h/18/
I find that passing the plugin object in the event.data object as event.data.base a bit awkward (it's just very verbose and harms readability of my code). Is there not a better way to reference the main plugin object?
I've had issues with variable scope before when using this way of structuring my plugin, so any general advice on how to structure my plugins in a sensible way would be appreciated as well.
Thanks,
Hendrik
EDIT: Please see my code below
;(function ( $, window, document, undefined ) {
// Create the defaults once
var pluginName = "myplugin",
defaults = {
settingA : 'someValue',
settingB : 'someValue'
};
// The actual plugin constructor
function Plugin(params) {
params.options = $.extend( {}, defaults, params.options);
this.params = params;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
var base = this; // cache the context so we can still reference it when entering new context
this.cacheElements();
this.bindEvents(base);
},
cacheElements : function (base) { //cache elements
this.$el = $('div.doSomething');
},
bindEvents : function (base) { // bind some touch functions to touch events, and modal window hidden event
this.$el.on('click', {base: base}, this.myFunction);
},
myFunction : function () {
console.log(this); //this now refers to $el
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( params ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new Plugin(params));
}
});
};
})( jQuery, window, document );
I recently ran into this issue, and I found a few work-arounds.
JavaScript's bind works in modern browsers:
bindEvents : function (base) {
this.$el.on('click', {base: base}, this.myFunction.bind(this));
},
myFunction : function () {
console.log(this); // Plugin context
}
jQuery's proxy function works in older browsers:
bindEvents : function (base) {
this.$el.on('click', {base: base}, $.proxy(this.myFunction, this));
},
myFunction : function () {
console.log(this); // Plugin context
}
You can also create the event handler function inside your bindEvents function, and give yourself access to both contexts:
bindEvents : function (base) {
var instance = this;
var myFunction = function() {
console.log(this); // element context
console.log(instance); // Plugin context
};
this.$el.on('click', {base: base}, myFunction);
}
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);
}
});
}());
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
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.