Binding change event to model in backbone.js

Question

I'm trying to bind change event to model, but is not working. Here is the link: http://jsfiddle.net/kahhor/jp4B6/2/ . I think, I'm doing some stupid mistake, that I cannot figure out.

I think the problem is that it is two different views...

Sorry, new in backbone.js, just learning :)

Thanks,

update: I changed the way I call views and models:

/* MODELS */
    var PopupM              = new PopupModel();
    var TaskbarM            = new TaskbarModel();
    var LeftNotificationM   = new LeftNotificationModel();
    /* /MODELS */

    window.PopupView = new PopupView({model: PopupM, LeftNotificationModel: LeftNotificationM});

    window.TaskbarView = new TaskbarView({model: TaskbarM});
    window.TaskbarView.loadTaskbar();

    window.LeftNotificationView = new LeftNotificationView({model: LeftNotificationM});
    window.LeftNotificationView.loadLeftNotification();

Everything works fine, except when I'm calling decrementNotification()
this error message shows in Firebug:

this.LeftNotificationModel is undefined
  this.LeftNotificationModel.decrementNotification();

But I already declared it here:

window.PopupView = new PopupView({model: PopupM, LeftNotificationModel: LeftNotificationM});

What I'm doing wrong here? :(

score 3 · Accepted Answer · answered Oct 10 '11 at 22:54

3

The way I see it you want to change the behaviors of two views based on the state of one model.

I'm not quite sure what PopupModel was supposed to do, so I omitted it.

Essentially, you want to create one Model LeftNotificationModel and pass that to both views within an option parameter.

var my_model = new LeftNotificationModel();

window.LeftNotificationView = new LeftNotificationView({ model: my_model});
window.LeftNotificationView.render();
window.PopupView = new PopupView({ model: my_model});
window.PopupView.render();

See the JSFiddle for a running example: http://jsfiddle.net/dj4cp/1/

answered Oct 10 '11 at 22:54

poezn

4,009
4
25
27

4

+1 The idiomatic approach to models/views is that you pass models into the view. You don't actually create them inside the view. The OP's example illustrates why. It is common to have views share the same data in BB. The most common case is when a list view has a model that is a collection (of models) and the item view has a model of the collected items... which ultimately has a reference back to the collection it is a part of. Although, it is also common for views to communicate through other means (than the model) such as event aggregators when it is specifically view-to-view. – Brian Genisio Oct 11 '11 at 00:15
Thanks, I learned my lesson :)) I saw copuple of times examples, where model object was created inside the view, I thought this is way it suppose to be.... But It is working almost fine, the problem is that I have to included PopupModel also, so I guess because of it it gives me error, that I added to the question. – kaha Oct 11 '11 at 02:20

score 1 · Answer 2 · answered Oct 11 '11 at 09:47

1

In response to your edit, which is really a new question:

Don't forget to bind decrementNotification to your object:

initialize: function() {
    _.bindAll(this, "decrementNotification");
}

answered Oct 11 '11 at 09:47

Brian Genisio

47,787
16
124
167

I tried it but it didn't worked. As you can see it is not showing that `decrementNotification is undefined` it showing that `LeftNotificationModel is undefined`... I tried even like this: `window.PopupView = new PopupView({model: PopupM, 'LeftNotificationModel': LeftNotificationM});` with quotes but it still cannot see it for some reason. – kaha Oct 12 '11 at 00:24
should I open new question for it? – kaha Oct 12 '11 at 00:45
@kaha I think you misunderstand what `bindAll` does. It binds the context of the function to your object. `LeftNotificationModel` is likely undefined because `this` is wrong. It all has to do with the way the Javascript context model works with functions. Anyways, Can you create a new jsFiddle with your new problem and create a new question with it? (seeing as this is a new problem and not likely related to the original question) thanks :) – Brian Genisio Oct 12 '11 at 01:37
I created new question for it: http://stackoverflow.com/questions/7734559/backbone-js-passing-2-models-to-1-view – kaha Oct 12 '11 at 02:17

Binding change event to model in backbone.js

2 Answers2