计划,每天学习两小时,坚持带来大改变。

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

前端开发 阿尤 2271浏览 0评论

看下下面这段代码,是用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:套路化的渲染代码(三)

游客
发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 验证码 (必填)点击刷新验证码