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

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

<div class="jb51code">
<pre class="brush:js;">
index.html
<!doctype html>
<html lang="en">

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> Backbone

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

@H_403_0@1.js

函数，new时，backbone会自动调用 initialize: function() { this.render(); },// 真正把修改操作同步到浏览器中 render: function() { this.$el.append("

"); } });

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

@H_403_0@执行：

@H_403_0@知识点说明

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

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

'); 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

@H_403_0@事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。 2.js

函数，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();

@H_403_0@执行：

@H_403_0@知识点

this.counter：内部使用的数据，可以initialize中初始化
events：声明格式，'event selector': 'func'，这比之前$('.wrapper button#add').on('click',function(){...}); 的方式要清晰许多了。

@H_403_0@模板

@H_403_0@在index.html中加入：

Hello techfellow,<%= counter %> time(s)

猜你在找的JavaScript相关文章