how model and view are connected in backbone.js

Question

I am new in Backbone.js and I keep failing to understand how the model and the view are connected.

I played with Angular where things are pretty clear there, how model, view and controller are connected.

I know Angular and Backbone are different and the latter is MV*.

In Backbone I can understand how model and view are created and work, but how are they connected? Seems to me they are seperated.

Please take a minute to explain or point me to a tutorial.

Thanks in advance

EDIT

OK, here is an example. It happens that I read the book that trolle suggests. This is a code from the book's github

I start reading. I understand the Todo model. I understand the TodoList collection. Then I get to the TodoView

creates a new li
uses Underscore template to compile html
defines some functions that imlements later in the same view
defines an initialize function

inside that function

what is this? this.model.bind('change', this.render, this); how he can magically bind the action change to a model? How the code knows about the model? When he defined the model and how? Just because is there, the code knows that model = Todo model?

How does he do that bind? What am I missing. This confuses me, so reading AppView view does not help me much

Thanks again

The model and view *should* be separated -- that's the whole point of MVC. The controller mediates between the two. What may be confusing you is that in Backbone, there is no formal notion of a controller. — Dexygen, Sep 01 '15 at 19:31
@GeorgeJempty Yes, I know there is no controller, I mention that Backbone is a MV*. Also, I get that model and view should be separated. But I dont find the connection between the two. — slevin, Sep 01 '15 at 19:47
@GeorgeJempty I have done this already, I also saw some videos and I still cannot get it. This is why I asked here — slevin, Sep 01 '15 at 20:03
You need to be more specific then. Have you tried writing any backbone code on your own based on the tutorials? If so, post some code. Or post what parts of the tutorial's code you don't understand. — Dexygen, Sep 01 '15 at 20:10
@GeorgeJempty I did added an example that confuses me. Check it if you have time. Thanks — slevin, Sep 01 '15 at 20:55
maybe this small demo can help too: http://pipefishbook.com/ch_3/views/ - the view binds to a model with this.listenTo . With this link from view to model, the model notifies the view about changes. — poseid, Sep 03 '15 at 07:34
As @mtl has pointed in his answer, we pass the model as a parameter while instantiatiating a view, **eg: var view = new TodoView({model: todo});**. Thus the view will always know what is the model, at the time of binding. — Chandan Hegde, Sep 28 '18 at 06:25

Dmitry JJ · Answer 1 · 2015-09-01T20:33:13.537

1

In backbone.js views are used for displaying models in browser. For example you can have a model object, whose JSON representation resembles the following: {'firstName': 'foo', 'lastName': 'bar' } And you use view object to map this model to browser DOM. As a rule, you use view object along with certain template engine. Templates allows for creating html chunks filled with model's data. If you are using underscore template function, your template may look something like this:

<div>
    <div>First Name: <%= firstName %></div>
    <div>Last Name: <%= lastName%></div>
</div>

After merging template with model's data it would be:

<div>
   <div>First Name: foo</div>
   <div>Last Name: bar</div>
</div>

You can reuse this view object and its template to display another model object, for example {'firstName':'another foo', 'lastName':'another bar'}, so that the result html would be:

<div>
   <div>First Name: another foo</div>
   <div>Last Name: another bar</div>
</div>

That is one thing about connection between model and view. Also view object can listen to changes in your model object to render immediately last updates. For example (inside view object): initialize: function() {this.listenTo(this.model, 'change', this.render);}

edited Sep 01 '15 at 20:33

answered Sep 01 '15 at 20:18

Dmitry JJ

169
2
11

Thanks. I still have questions. Check the edit in my original question – slevin Sep 01 '15 at 20:54
It seems that you are wondered how 'change' event appeared. Change is logical event that is fired whenever your model's data changes. – Dmitry JJ Sep 01 '15 at 21:00
Hey, my mistake , I re-edited, this is not what I am asking. I am asking how the code knows that `model` means `Todo` model from earlier. – slevin Sep 01 '15 at 21:04
When you create view object you pass your model object to its constructor function : var modelObj = new MyModel({'id':id}); var myView = new MyView(({'el': $('#some_id').first(), 'model': modelObj})); Later model object is available as this.model from within view object's code. – Dmitry JJ Sep 01 '15 at 21:13

mtl · Answer 2 · 2015-09-02T12:36:13.207

In short, views are the logic behind the presentation of the model's data to the user. So in its simplest form, you bind a model to a view through the models change events, so you can update the presentation instantly whenever your data changes. So a simple view would take in a model, create HTML elements based on that models data, insert that html into the DOM and update that HTML whenever the data changes.

You can find a great book full of helpful examples here (free): http://addyosmani.github.io/backbone-fundamentals/

EDIT:

With regards to your updated question about how the view knows about the model, this.model is a reference to the actual model object. You can set the reference to the model when you create the view. That is, when you call your view-constructor to instantiate a view, you could pass in a model. You need to go all the way into the AppView object in the code example to see where this happens, in the addOne method:

addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
}

The function gets a model as a parameter, and when the view is instantiated that model is referenced. So now you have a view that knows about the model, and when the view.render method is called, the view can render it's template with the model data. When you change the data in the model, for instance by using the set method, myModel.set({title: "March 20", content: "In his eyes she eclipses..."});, you trigger the change event for that model. You can see all the built in events for backbone here: http://backbonejs.org/#Events-catalog. The view is listening for that event, just like it could listen for a click event or any other event. In the code in your example the view listenes for a change event from the model. If it hears it it knows that the object behind this.model has changed, and it can then update the DOM with the new data or do something else. In the case of the example it calls this.render, which updates the DOM with the new model data.

One example that confuses me, is from the book you suggest. Please check my edit in my original question. Thanks — slevin, Sep 01 '15 at 20:55

score 0 · Answer 3 · answered Sep 03 '15 at 01:00

I think you want to know about Backbone.Events (http://backbonejs.org/#Events), both Models and Views make use of this module and that's how the view learns about changes in the Model, if you want to learn how this is implemented you can always read the annotated source (http://backbonejs.org/docs/backbone.html#section-19), but more important I think you want to learn about the observer pattern: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript.

how model and view are connected in backbone.js

3 Answers3