Backbone.js框架中简单的View视图编写学习笔记

传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。

index.html




  
  
  



  

  
  
  
  

其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到

1.js

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

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

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("
Hello techfellow!
");
 }
});

var listView = new ListView({el: $('.wrapper')});

执行：

$duo 1.js

知识点说明

• el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
• initialze：调用new时，会触发的函数调用，类似构造函数。
• render：触发DOM操作，浏览器会渲染
• 最后一句，说明在new时，可以传递参数

疑惑
如果写成 new ListView({el: '.wrapper'})也是可以的。
但考虑到el本身的含义，还是加上$更清晰些。

• $el和$()
• $(this.el) 等价于 this.$el
• $(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement
如果想修改el内容，包括值和绑定事件，可以使用setElement。下面这个例子中，setElement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('');
var button2 = $('');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true

事件处理和模板解析都是前端渲染必需的工作，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("点击添加
");
 },

 // event handler
 addItem: function() {
  this.counter++;
  this.$('ul').append("
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中加入：

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