Backbone.js框架中简单的View视图编写学习笔记
传统上用jQuery操作DOM,就类似C语言中的goto语句,随着项目复杂度增大,会越来越难以维护。
关于MVC(以及后续的MVP,MVVM),网上资源很多,就不展开。我们直接用代码来操练。
index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Backbone</title> </head> <body> <div class="wrapper"></div> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/underscore-min.js"></script> <script src="js/lib/backbone-min.js"></script> <script src="build/x.js"></script> </body> </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("<ul><li>Hello techfellow!</li></ul>"); } }); 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 = $('<button></button>'); var button2 = $('<button></button>'); // 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("<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})); ...
相关文章
全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下2016-05-05实例讲解JavaScript的Backbone.js框架中的View视图
这篇文章主要介绍了实例讲解JavaScript的Backbone.js框架中的View视图,在浏览器端js框架backbone中我们用view来绑定和处理DOM事件,需要的朋友可以参考下2016-05-05JavaScript的Backbone.js框架环境搭建及Hellow world示例
这篇文章主要介绍了JavaScript的Backbone.js框架环境搭建及Hellow world示例,Backbone是一个类似MVC结构的前端MVVM框架,非常轻量,需要的朋友可以参考下2016-05-05Backbone.js框架中Model与Collection的使用实例
这篇文章主要介绍了Backbone.js框架中Model与Collection的使用实例,Collection是Model的一个有序的集合,需要的朋友可以参考下2016-05-05深入解析JavaScript框架Backbone.js中的事件机制
这篇文章主要介绍了JavaScript框架Backbone.js中的事件机制,其中涉及到Backbone的MVC结构及内存使用方面的很多知识,需要的朋友可以参考下2016-02-02讲解JavaScript的Backbone.js框架的MVC结构设计理念
这篇文章主要介绍了JavaScript的Backbone.js框架的MVC结构设计理念,相比较于Angular.js,同样为MVC结构的Backbone则显得轻巧许多,需要的朋友可以参考下2016-02-02简单了解Backbone.js的Model模型以及View视图的源码
这篇文章主要简单介绍了Backbone.js的Model模型以及View视图的源码,Backbone是一款高人气JavaScript的MVC框架,需要的朋友可以参考下2016-02-02JavaScript的Backbone.js框架的一些使用建议整理
这篇文章主要介绍了JavaScript的Backbone.js框架的一些使用建议整理,文中列的几点主要还是针对DOM方面的操作,需要的朋友可以参考下2016-02-02
最新评论