Backbone.js框架中简单的View视图编写学习笔记_基础知识
时间：2021-07-01 10:21:17
帮助过：4人阅读
传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。
其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到
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事件也同步修改过去了。
事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。
2.js
执行：
知识点
- this.counter：内部使用的数据，可以initialize中初始化
- events：声明格式，'event selector': 'func'，这比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰许多了。
模板
在index.html中加入：
在View的声明中修改：
修改addItem：
同理，这里的模板可以替换为任何第三方模板引擎。
比如：artTemplate
