backbone学习笔记：2 View的events和模板

这次整理学习View的events和模板相关的内容，事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。

2.js

var ListView = Backbone.View.extend({
  el: $('.wrapper'),

  events: {
    'click button#add': 'addItem'
  },

  // 初始化函数，new时，backbone会自动调用
  initialize: function() {
    // 用于计数
    this.counter = 0;
    this.render();
  },

  // 真正把修改操作同步到浏览器中
  render: function() {
    this.$el.append("<button id='add'>点击添加</button><ul></ul>");
  },

  // event handler
  addItem: function() {
    this.counter++;
    this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
  }
});

var listView = new ListView();

执行：

$duo 2.js

知识点

• this.counter：内部使用的数据，可以initialize中初始化

• events：声明格式，'event selector': 'func'，这比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰许多了。

模板

在index.html中加入：

<script type="text/template" id="tplItem">
    <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面，否则在执行时，可能遇到找不到tplItem的情况-->
<script src="build/2.js"></script>

在View的声明中修改：

events: {
  'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),

修改addItem：

addItem: function() {
  this.counter++;
  this.$('ul').append(this.template({counter: this.counter}));
}

同理，这里的模板可以替换为任何第三方模板引擎。
比如：artTemplate

var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...