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

Marionette:Marionette App:Todo_装修设计图 TodoMVC.Layout(二)

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

Layout和ItemView有个很大的区别,它可以包含region。在定义Layout时,我们要给出template ,以及这个template中所包含的region。在渲染完layout之后,我们可以用所定义的regions显示其他views。也就是我们要通过Layout的定义确定要在每个房间里放上什么,以及应该具备什么功能。

在下面的TodoMVC Layout模块中,我们要定义下面两个Layout:

  • Header: 我们可以在这里创建新的Todo
  • Footer: 我们可以在这里显示还有多少Todo,以及做完了多少之类的汇总信息

这样,之前放在 AppView 和 TodoView中的一些view逻辑就被挪到这里来了。

注意一下 ,Marionette module (比如下面这个) 实现了一个简单的模块系统,用来在Marionette apps中实现私有化和封装。然而我们不是必须要这么做,还可以用 RequireJS + AMD 实现。

TodoMVC.Layout.js:

TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _){ // Layout Header View // ------------------ Layout.Header = Marionette.ItemView.extend({ template : '#template-header', // UI bindings create cached attributes that // point to jQuery selected objects ui : { input : '#new-todo' }, events : { 'keypress #new-todo': 'onInputKeypress' }, onInputKeypress : function(evt) { var ENTER_KEY = 13; var todoText = this.ui.input.val().trim(); if ( evt.which === ENTER_KEY && todoText ) { this.collection.create({ title : todoText }); this.ui.input.val(''); } } }); // Layout Footer View // ------------------ Layout.Footer = Marionette.Layout.extend({ template : '#template-footer', // UI bindings create cached attributes that // point to jQuery selected objects ui : { count : '#todo-count strong', filters : '#filters a' }, events : { 'click #clear-completed' : 'onClearClick' }, initialize : function() { this.bindTo(App.vent, 'todoList:filter', this.updateFilterSelection, this); this.bindTo(this.collection, 'all', this.updateCount, this); }, onRender : function() { this.updateCount(); }, updateCount : function() { var count = this.collection.getActive().length; this.ui.count.html(count); if (count === 0) { this.$el.parent().hide(); } else { this.$el.parent().show(); } }, updateFilterSelection : function(filter) { this.ui.filters .removeClass('selected') .filter('[href="#' + filter + '"]') .addClass('selected'); }, onClearClick : function() { var completed = this.collection.getCompleted(); completed.forEach(function destroy(todo) { todo.destroy(); }); } }); });

接下来我们要处理应用的路由和工作流,比如对页面中Layout显示还是隐藏起来的控制。

转载请注明:阿尤博客 » Marionette:Marionette App:Todo_装修设计图 TodoMVC.Layout(二)

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

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

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