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