Question

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);

Answer 1

The way Backbone implements the MVC architecture, Views may be attached to datasets(Collections) as well as individual model instances. Models typically represet records retrieved from database but in custom implementations may be any data objects.

As you see, it is a very obvious question that when you actually have a view that represents a whole dataset so why should it be created out by nesting of views, each representing a single model instance. It is not necessary to do things in this way. You can have a non-nested view that represents a whole dataset which updates itself when any item in the collection is changed.

But now, think … would it actually make sense to re-render the whole view just because one single entity in the collection has changed. Suppose you have a collection of thousands of records that is being represented by a datagrid view. Dont you think that re-rendering the entire datagrid with every change in collection will increase the latency of the application.

So, it is in many cases a more preferred option to have a nested view object the way your example has implemented. So when a single model instance changes, the corresponding view has to be re-rendered and not the whole composite view.

Also, if you want to provide the user, UI elements that operate on data sets as well as individual elements, it is more convenient and more sensible to implement in this nested view manner, where you would provide UI controls for operating on datasets at the composite view level and the controls for individual data elements at the element view level.

Hope that clarifies your question.