视图渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.9.1.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> </head> <body> <div id="search_container"></div> <script type="text/template" id="search_template"> <label><%= search_label %></label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /> </script> <script> (function ($) { //此处添加下面的试验代码 var SearchView=Backbone.View.extend({ initialize:function(){},//初始化 render:function(content){//渲染方法 var template=_.template($('#search_template').html(),content);//模板解析 $(this.el).html(template);//将解析后的代码片段添加到el中 } }); var searchView=new SearchView({//实例化一个视图 el:$('#search_container')//指定el元素 （每个视图都会有el属性，如果不是我们指定，则backbone会自动生成一个div元素） }); searchView.render({search_label:"搜索渲染"});//调用视图的渲染方法 })(jQuery); </script> </body> </html>
需要注意的是在调用view.render的时候，需要给模板中所有的变量传值，不然会报错。关于$el，作者说是对view中元素的缓存，不明白这是什么意思，我感觉是jquery形式的el对象。
<ul> <% _.each(labels, function(name) { %> <% if(name != "label2") {%> <li><%= name %></li> <% } %> <% }); %> </ul>
var SearchView = Backbone.View.extend({ el: "#search_container", initialize: function(){ var labels = ['label1', 'label2', 'label3']; this.render({labels: labels}); }, render: function(context) { //使用underscore这个库，来编译模板 var template = _.template($("#search_template").html(), context); //加载模板到对应的el属性中 $(this.el).html(template); }, }); var searchView = new SearchView();
这个例子与第一个类似，只不过它是在初始化的时候渲染了视图，并且el是在创建SearchView的时候设置的，模板也比第一个例子复杂点。
