Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does Backbone.js connect View to Model

I am trying to learn backbone.js through the following example. Then I got stuck at the point

ItemView = Backbone.View.extend

why you can use this.model.get? I thought this is referring to the instance of ItemView that would be created. Then why would ItemView has a model property at all?!!

    (function($){
      var Item = Backbone.Model.extend({
        defaults: {
          part1: 'hello',
          part2: 'world'
        }
      });

      var List = Backbone.Collection.extend({
        model: Item
      });


var ItemView = Backbone.View.extend({

        tagName: 'li', 
        initialize: function(){
          _.bindAll(this, 'render');
        },
        render: function(){
          $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
          return this;
        }
      });

      var ListView = Backbone.View.extend({
        el: $('body'), 
        events: {
          'click button#add': 'addItem'
        },
        initialize: function(){
          _.bindAll(this, 'render', 'addItem', 'appendItem'); 

          this.collection = new List();
          this.collection.bind('add', this.appendItem); 

          this.counter = 0;
          this.render();
        },
        render: function(){
          $(this.el).append("<button id='add'>Add list item</button>");
          $(this.el).append("<ul></ul>");
          _(this.collection.models).each(function(item){ 
            appendItem(item);
          }, this);
        },
        addItem: function(){
          this.counter++;
          var item = new Item();
          item.set({
            part2: item.get('part2') + this.counter
          });
          this.collection.add(item);
        },

        appendItem: function(item){
          var itemView = new ItemView({
            model: item
          });
          $('ul', this.el).append(itemView.render().el);
        }
      });

      var listView = new ListView();      
    })(jQuery);
like image 540
William Sham Avatar asked Jul 22 '11 01:07

William Sham


People also ask

How does Backbone JS work?

BackboneJS provides various building blocks such as models, views, events, routers and collections for assembling the client side web applications. When a model changes, it automatically updates the HTML of your application. BackboneJS is a simple library that helps in separating business and user interface logic.

What are views in Backbone JS?

In backbone. js, there are 7 modules HTTP request, Router, View, Events, Model, and Collection. Whenever a user makes a request it is directed to the router and in response to these requests, a user interface is displayed at the user end which is known as Views. So basically View in backbone.

Do people still use Backbone JS?

Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.

What is the architecture of backbone JS?

It is based on the Model-View Controller framework that binds data, which is abstracted into models, and DOM which is abstracted into views, using events. It is a JavaScript library. Applications of Backbone. js: Following are the applications of Backbone.


1 Answers

The model is usually passed to the View as a constructor argument like this.

var item = new Item();
var view = new ItemView({ model : item });

other parameters can be passed as well, check out the docs at http://backbonejs.org/#View.

like image 93
Russell Avatar answered Oct 13 '22 21:10

Russell