Backbone视图render&*template详细案例

Backbone视图render&*template

html：

	<divid="jimvinDiv"></div>

	<!--以下为Underscore模板-->

	<scripttype="text/template" id="item-template">

	<divclass="view">

	<inputclass="toggle" type="checkbox"

	<%=completed ? 'checked' : '' %> >

	<label><%-title %></label>

	<buttonclass="destroy"></button>

	</div>

	</script>

例子1

功能：视图类render方法负责将数据塞到模板，利用模板生成html输出到#jimvinDiv标签中

var ItemView =Backbone.View.extend({

template:_.template($('#item-template').html())

,render:function() {

this.$el.html(this.template({completed: true, title: 'myTitle' })); // this.model.attributes

return this;

}

,el:'#jimvinDiv'

});

itemView = newItemView();

itemView.render();



/*

注意，此时要使用Underscore模板要先加载base.js，里面包括了_.template模板方法

利用模板的好处：利用模板不用再js代码里面去组织html字符串了，消除过度耦合之余，还能提高模板的可维护性，可读性都会更高

*/

本文来源 我爱IT技术网 http://www.52ij.com/jishu/4829.html 转载请保留链接。