Marionette：套路化的渲染代码(三)

看下下面这段代码，是用Backbone 和 Underscore 模板渲染视图的典型实现。首先要有个模板，可以直接放在DOM里，然后要用Javascript定义使用这个模板的视图，并从model里得到数据放到模板里。是的，这也是MVC。

佛说：一沙一世界,一花一菩提,须弥芥子,皆存玄虚。大MVC里套着无数个小MVC。

定义模板

<script type="text/html" id="my-view-template">
 <div class="row"> 
<label>First Name:</label> <span><%= firstName %></span> </div>
  <div class="row"> <label>Last Name:</label> <span><%= lastName %></span> </div>
  <div class="row">
    <label>Email:</label> <span><%= email %></span> </div> </script>

定义view

var MyView = Backbone.View.extend({ template: $('#my-view-template').html(), render: function(){ // compile the Underscore.js template var compiledTemplate = _.template(this.template); // render the template with the model data var data = this.model.toJSON(); var html = compiledTemplate(data); // populate the view with the rendered html this.$el.html(html); } });

这些做好之后，可以创建view的实例，将model传给它。然后把view的el加到DOM中，显示的工作就完成了。

给model套上模板

var myModel = new MyModel({ firstName: 'Derick', lastName: 'Bailey', email: '[email protected]' }); var myView = new MyView({ model: myModel }) myView.render(); $('#content').html(myView.el)

这是用Backbone定义，构建，渲染和显示的标准实现。也就是我们所说的“套路化代码”，一遍遍的重复，每个项目，每个相同的功能性实现中都有这些代码。繁琐，重复，毫无趣味。

接下来我们要请出 Marionette ItemView - 用它，view 定义可以变得更简洁！

转自 ：http://www.ituring.com.cn/article/31597

转载请注明：阿尤博客 » Marionette：套路化的渲染代码(三)