Backbone.js的一些使用技巧

1. 使用事件代理

Backbone.js允许我们对模型和视图进行事件监听和触发，通过事件的机制，我们可以优雅地实现模块之间的解耦。但在实际应用中，如果我们直接将事件绑定在某个DOM元素上，随着应用复杂度的增加和DOM节点的变动，这种事件绑定的方式就会变得麻烦和不稳定。

因此，我们通常采用事件代理的方式，即绑定事件到一个固定不变的父节点上，然后通过判断事件源来执行相应的代码。这样做的好处是可以减少内存占用，提高程序性能，同时也避免了因节点变动而造成的事件失效的问题。

示例一：使用事件代理来绑定点击事件

var MyView = Backbone.View.extend({
  events: {
    'click li': 'clickHandler'
  },

  clickHandler: function(e) {
    console.log($(e.target).text());
  }
});

在该示例中，事件被绑定在视图的根节点上，当用户点击某个li元素时，事件源会被传递到该节点，通过判断事件源来确定点击的是哪个li元素，然后执行相应的代码。这种方式相对于直接绑定事件在每个li元素上，可以减少事件绑定的次数。

2. 使用模板引擎

Backbone.js并没有自带的模板引擎，但它提供了丰富的数据展示功能，我们可以通过自己选择和集成模板引擎来实现数据的渲染和展示，同时也提高了代码重用性和维护性。

在实际应用中，我们通常会选择Underscore.js中的template函数作为模板引擎，通过该函数来编译模板字符串，并传递数据来渲染模板，最终生成HTML代码。

示例二：使用模板引擎来渲染视图

var MyView = Backbone.View.extend({
  template: _.template($('#template').html()),

  render: function() {
    var html = this.template(this.model.toJSON());
    this.$el.html(html);
    return this;
  }
});

在该示例中，使用了Underscore.js中的template函数来编译模板字符串，然后将数据传递给模板，生成HTML代码。最后将生成的HTML代码插入到视图容器中，完成数据的渲染和展示。