Backbone

Backbone.js提供了一个在客户端实现MVC的基础（框架），简单而强大。

可选的skylark-backbone库基于skylark库，提供与Backbone完全兼容的API，代码更简单，更高效，Backbone程序可以直接运行在skylark上而不需要原始的Backbone库。

使用skylark-backbone，有两个方法：直接使用cdn，或使用bower或npm将库复制到项目的lib文件夹。

另外，您还需要在slax-config.json文件中配置使用skylark-backbone库。

使用cdn :

....
    "runtime" : {
      "skylarkjs" : {
        "version" : "0.9.3"
      },
      "shim": {
          "backbone": {
              "deps": ["underscore", "jquery"],
              "exports": "Backbone"
          },
          "underscore": {
              "exports: '_'
          }
      },
      "paths": {
        "jquery" : "http://registry.skylarkjs.org/packages/skylark-jquery/v0.9.3/uncompressed/skylark-jquery",
        "underscore" : "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore",
        'backbone' :  "http://registry.skylarkjs.org/packages/skylark-backbone/0.9.0/backbone"
       }
    },
....

使用lib副本:

....
    "runtime" : {
      "skylarkjs" : {
        "version" : "0.9.3"
      },
      "shim": {
          "backbone": {
              "deps": ["underscore", "jquery"],
              "exports": "Backbone"
          },
          "underscore": {
              "exports: '_'
          }
      },
      "paths": {
        "jquery" : "./lib/skylark-jquery/uncompressed/skylark-jquery",
        "underscore" : "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore",
        'backbone' :  "./lib/skylark-backbone/backbone"
       }
    },
....

skylarkjs路由控制器是一个纯JavaScript对象，从spa.RouteController继承不是必需的。 因此，我们可以使用骨干视图作为路由控制器：

define(["Backbone"],function(Backbone) {
  var TodoView = Backbone.View.extend({
    klassName : "TodoView",
    //... is a list tag.
    tagName:  "li",

    // Cache the template function for a single item.
    template: _.template($('#item-template').html()),

    // The DOM events specific to an item.
    events: {
      "click .toggle"   : "toggleDone",
      "dblclick .view"  : "edit",
      "click a.destroy" : "clear",
      "keypress .edit"  : "updateOnEnter",
      "blur .edit"      : "close"
    },

    // The TodoView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a **Todo** and a **TodoView** in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
      this.listenTo(this.model, 'change', this.render);
      this.listenTo(this.model, 'destroy', this.remove);
    },

    // Re-render the titles of the todo item.
    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      this.$el.toggleClass('done', this.model.get('done'));
      this.input = this.$('.edit');
      return this;
    },

    // Toggle the `"done"` state of the model.
    toggleDone: function() {
      this.model.toggle();
    },

    // Switch this view into `"editing"` mode, displaying the input field.
    edit: function() {
      this.$el.addClass("editing");
      this.input.focus();
    },

    // Close the `"editing"` mode, saving changes to the todo.
    close: function() {
      var value = this.input.val();
      if (!value) {
        this.clear();
      } else {
        this.model.save({title: value});
        this.$el.removeClass("editing");
      }
    },

    // If you hit `enter`, we're through editing the item.
    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
    },

    // Remove the item, destroy the model.
    clear: function() {
      this.model.destroy();
    },

    // skylarkjs route event handler
    rendering : function(e) {
       this.render();
       e.content = this.$el[0];
    }

  });

  return TodoView 
});