Question

I’m diving into the source code of these two awesome works,however,I can’t figure out the implement of them,how can the moment the data of the model update the view immedately changes,
At the very first beginning,I thought it may use something like object.watch() in Gecko,and obviously I can’t find them in both sources
any ideas of the core thought of them
Thanks in advance~

Answer 1

Lets take a look at backbones Event implementation:

Calling bind you store a passed function (callback) under passed key (ev) in the hash _callbacks.

Backbone.Events = {

    // Bind an event, specified by a string name, `ev`, to a `callback` function.
    // Passing `"all"` will bind the callback to all events fired.
    bind : function(ev, callback, context) {

      //create a new hash to save the callbacks when it doesn't exits yet
      var calls = this._callbacks || (this._callbacks = {});

      //create a new array to store the callbacks if its doesn't exits yet
      var list  = calls[ev] || (calls[ev] = []);

      //add a new array holding the function and the context with which the function 
      // will be called later
      list.push([callback, context]);

      return this;
    },

Unbind just delete all or the passed callbacks from the hash.

    // Remove one or many callbacks. If `callback` is null, removes all
    // callbacks for the event. If `ev` is null, removes all bound callbacks
    // for all events.
    unbind : function(ev, callback) {
      var calls;
      if (!ev) {
        this._callbacks = {};
      } else if (calls = this._callbacks) {
        if (!callback) {
          calls[ev] = [];
        } else {
          var list = calls[ev];
          if (!list) return this;
          for (var i = 0, l = list.length; i < l; i++) {
            if (list[i] && callback === list[i][0]) {
              list[i] = null;
              break;
            }
          }
        }
      }
      return this;
    },

Trigger will call all functions that stored under the passed key.

    // Trigger an event, firing all bound callbacks. Callbacks are passed the
    // same arguments as `trigger` is, apart from the event name.
    // Listening for `"all"` passes the true event name as the first argument.
    trigger : function(eventName) {
      var list, calls, ev, callback, args;
      var both = 2;
      if (!(calls = this._callbacks)) return this;
      while (both--) {
        ev = both ? eventName : 'all';
        if (list = calls[ev]) {
          for (var i = 0, l = list.length; i < l; i++) {
            if (!(callback = list[i])) {
              list.splice(i, 1); i--; l--;
            } else {
              //when more then one argument was passed to the trigger function
              // this arguments will be passed to call of the stored function
              args = both ? Array.prototype.slice.call(arguments, 1) : arguments;

              //here the stored function is called with the optional passed context
              callback[0].apply(callback[1] || this, args);
            }
          }
        }
      }
      return this;
    }

  };

This is one of the advantages of JavaScript that you can store functions with its full scope in a variable an call them later. So add the end there is no magic in databinding. Its just a data structure to save function with an key in a hash and call them using the key.

As the Backbone object View, Model, Controller extends the Events object, you can bind/trigger events on all of it. So when a view binds a function on model change, the model call this.trigger('change') on when ever something was added, removed etc.