Backbone.js实战之视图学习笔记
严格来说模型（Model）和集合（Collection）都属于底层的数据处理，真正与页面交互的视图（View)，他的核心功能是处理数据业务逻辑，绑定DOM事件，渲染模型和集合数据。
- el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
- initialze：调用new时，会触发的函数调用，类似构造函数。
- render：触发DOM操作，浏览器会渲染
- 最后一句，说明在new时，可以传递参数
1.1 通过视图对象添加DOM元素
a. 功能描述
b. 实现代码
<style type="text/css"> .cls_6 { font-size: 12px; } </style> </head> <body> <div id="show" class="cls_6"></div> </body> <script type="text/javascript"> var testview = Backbone.View.extend({ el: '#show', render: function (content) { this.el.innerHTML = content; } }); var test = new testview(); test.render("backbone是构建前端MVC的利器"); </script>
c. 页面效果
d. 源码分析
1.2 视图对象访问模型
a. 功能描述
b. 实现代码
<style type="text/css"> .cls_6 { font-size: 12px; } </style> </head> <body> <div id="show" class="cls_6"></div> </body> <script type="text/javascript"> var student = Backbone.Model.extend({ defaults: { Code: "", Name: "", Score: 0 } }); var stus = new student({ Code: "10107", Name: "陶国荣", Score: 750 }); var stusview = Backbone.View.extend({ el: '#show', render: function () { this.el.innerHTML = JSON.stringify(this.model); } }); var stuv = new stusview({ model: stus }); stuv.render(); </script>
c. 页面效果
d. 源码分析
1.3 视图对象访问集合对象
a. 功能描述
b. 实现代码
<style type="text/css"> .cls_6 { font-size: 12px; } </style> </head> <body> <div id="show" class="cls_6"></div> </body> <script type="text/javascript"> var stumodels = [{ Code: "10101", Name: "刘真真", Score: 530 }, { Code: "10102", Name: "张明基", Score: 460 }, { Code: "10103", Name: "舒虎", Score: 660 }, { Code: "10104", Name: "周小敏", Score: 500 }, { Code: "10105", Name: "陆明明", Score: 300 }]; var stulist = new Backbone.Collection(stumodels); var stuview = Backbone.View.extend({ el: '#show', render: function () { var curlist = this.collection.models; for (var i = 0; i < curlist.length; i++) { this.el.innerHTML += JSON.stringify(curlist[i]) + "</br>"; } } }); var stuv = new stuview({ collection: stulist }); stuv.render(); </script>
c. 页面效果
d. 源码分析
1.4 处理逻辑的模板
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 13px; } div { width: 260px; padding: 5px; } </style> </head> <body> <div id="score"></div> <script type="text/template" id="score-tpl"> <%= score>600 ? "优秀":"及格"%> </script> </body> <script type="text/javascript"> var stuview = Backbone.View.extend({ el: $("#score"), initialize: function () { this.template = _.template($("#score-tpl").html()); }, render: function (pscore) { this.$el.html(this.template({ score: pscore })); } }); //实例化一个view视图 var stuv = new stuview(); stuv.render(600) </script>
c. 页面效果
d. 源码分析
1.5 显示多项内容的模板
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 12px; } ul { list-style-type: none; padding: 0px; margin: 0px; } </style> </head> <body> <ul id="ulshowstus"></ul> <script type="text/template" id="stus-tpl"> <li>编号：<%=Code%></li> <li>姓名：<%=Name%></li> <li>分数：<%=Score%></li> </script> </body> <script type="text/javascript"> var student = Backbone.Model.extend({ defaults: { Code: "", Name: "", Score: 0 } }); var stus = new student({ Code: "10107", Name: "陶国荣", Score: 750 }); var stuview = Backbone.View.extend({ el: $("#ulshowstus"), initialize: function () { this.template = _.template($("#stus-tpl").html()); }, render: function () { this.$el.html(this.template(this.model.toJSON())); } }); //实例化一个view视图 var stuv = new stuview({ model: stus }); stuv.render(); </script>
c. 页面效果
d. 源码分析
1.6 自定义模板变量标记
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 12px; } ul { list-style-type: none; padding: 0px; margin: 0px; } </style> </head> <body> <ul id="ulshowstus"></ul> <script type="text/template" id="stus-tpl"> <li>自定义模版变量标记</li> <li>编号：{{Code}}</li> <li>姓名：{{Name}}</li> <li>分数：{{Score}}</li> </script> </body> <script type="text/javascript"> _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g }; var student = Backbone.Model.extend({ defaults: { Code: "", Name: "", Score: 0 } }); var stus = new student({ Code: "10106", Name: "占小方", Score: 380 }); var stuview = Backbone.View.extend({ el: $("#ulshowstus"), initialize: function () { this.template = _.template($("#stus-tpl").html()); }, render: function () { this.$el.html(this.template(this.model.toJSON())); } }); //实例化一个view视图 var stuv = new stuview({ model: stus }); stuv.render(); </script>
c. 页面效果
d. 源码分析
1.7 视图中简单事件绑定
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 13px; } div { width: 260px; text-align: center; padding: 5px; } .changed { border: solid 1px #555; } </style> </head> <body> </body> <script type="text/javascript"> var stuview = Backbone.View.extend({ el: $("body"), initialize: function () { this.render(); }, render: function () { this.$el.append('<div id="backbone">backbone是构建前端MVC的利器</div>'); }, events: { 'click div#backbone': 'togcls' }, togcls: function () { $("#backbone").toggleClass("changed"); } }); //实例化一个view视图 var stuv = new stuview(); </script>
c. 页面效果
d. 源码分析
1.8 绑定视图中的多个事件
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 13px; } div { width: 260px; text-align: center; padding: 5px; } .changed { border: solid 1px #555; } </style> </head> <body> <div id="main"> </div> <script type="text/template" id="main-tpl"> <div id="backbone"><%=mess%></div> <input id="btnshow" type="button" value="点击一下" /> </script> </body> <script type="text/javascript"> var stuview = Backbone.View.extend({ el: $("#main"), initialize: function () { this.template = _.template($("#main-tpl").html()); this.render(); }, render: function () { this.$el.html(this.template({ mess: "backbone是构建前端MVC的利器" }) ); }, events: { 'click div#backbone': 'togcls', 'click input#btnshow': 'toggle' }, togcls: function () { $("#backbone").toggleClass("changed"); }, toggle: function () { $("#backbone").toggle(); } }); //实例化一个view视图 var stuv = new stuview(); </script>
c. 页面效果
d. 源码分析
1.9 动态绑定和取消视图中的事件
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 13px; } div { width: 260px; text-align: center; padding: 5px; } .changed { border: solid 1px #555; } </style> </head> <body> <div id="main"> </div> <script type="text/template" id="main-tpl"> <div id="backbone">backbone是构建前端MVC的利器</div> <input id="btn_a" type="button" value="切换样式" /> <input id="btn_b" type="button" value="取消绑定" /> <input id="btn_c" type="button" value="重新绑定" onclick="stuv.rebind()"/> </script> </body> <script type="text/javascript"> var stuv = null; var stuview = Backbone.View.extend({ el: $("#main"), initialize: function () { this.template = _.template($("#main-tpl").html()); this.render(); }, render: function () { this.$el.html(this.template()); }, rebind: function () { this.delegateEvents(this.events); }, events: { 'click input#btn_a': 'btnclick_a', 'click input#btn_b': 'btnclick_b' }, btnclick_a: function () { $("#backbone").toggleClass("changed"); }, btnclick_b: function () { this.undelegateEvents(); } }); //实例化一个view视图 stuv = new stuview(); </script>
c. 页面效果
d. 源码分析
1.10 使用Backbone框架开发Web应用
a. 功能描述
b. 实现代码
<style type="text/css"> body { font-size: 12px; } ul { list-style-type: none; padding: 0px; margin: 0px; width: 270px; } ul li { margin: 5px 0px; } ul .lh { font-weight: bold; border-bottom: solid 1px #555; background-color: #eee; height: 23px; line-height: 23px; } ul .lc { border-bottom: dashed 1px #ccc; height: 23px; line-height: 23px; } ul li span { padding-left: 10px; width: 80px; float: left; } </style> </head> <body> <ul id="ulshowstus"> <li class="lh"> <span>编号</span> <span>姓名</span> <span>分数</span> </li> </ul> <br /> <ul> <li>编号： <input id="txtCode" type="text" /> </li> <li>姓名： <input id="txtName" type="text" /> </li> <li>分数： <input id="txtScore" type="text" /> </li> <li> <input id="btnSubmit" type="button" value="提交" /> </li> </ul> <script type="text/template" id="stus-tpl"> <li class="lc"> <span><%=Code%></span> <span><%=Name%></span> <span><%=Score%></span> </li> </script> </body> <script type="text/javascript"> var student = Backbone.Model.extend({ defaults: { Code: "10001", Name: "张三", Score: 100 } }); var stulist = Backbone.Collection.extend({ initialize: function (model, options) { this.on("add", options.view.showmodel); } }); var stuview = Backbone.View.extend({ el: $("body"), initialize: function () { this.stul = new stulist(null, { view: this }) }, events: { "click #btnSubmit": "addmodel" }, addmodel: function () { var stum = new student({ Code: $("#txtCode").val(), Name: $("#txtName").val(), Score: $("#txtScore").val() }); this.stul.add(stum); }, showmodel: function (model) { this.template = _.template($("#stus-tpl").html()); $("#ulshowstus").append(this.template(model.toJSON())); } }); //实例化一个view视图 var stuv = new stuview(); </script>
c. 页面效果
d. 源码分析
