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

Marionette:Marionette App:Todo_路由器 AppRouter 及 Controller(三)

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

为了简化路由,Marionette 引入了 AppRouter 的概念。用上它之后,就不用再写那些路由事件处理的繁琐代码了,并且可以将路由器配置为直接调用某个对象上的方法。我们用appRoutes配置AppRouter。

原来用Backbone时,我们要在路由器Workspace中定义 '*filter': 'setFilter' 路由:

 var Workspace = Backbone.Router.extend({ routes:{ '*filter': 'setFilter' }, setFilter: function( param ) { // Set the current filter to be used window.app.TodoFilter = param.trim() || ''; // Trigger a collection reset/addAll window.app.Todos.trigger('reset'); } });

尽管我们用上了可读性很强的Layouts,但原来在AppView and TodoView中的显示逻辑并没有挪过去,也要由TodoList 控制器处理。

TodoMVC.TodoList.js:

TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _){ // TodoList Router // --------------- // // Handle routes to show the active vs complete todo items TodoList.Router = Marionette.AppRouter.extend({ appRoutes : { '*filter': 'filterItems' } }); // TodoList Controller (Mediator) // ------------------------------ // // Control the workflow and logic that exists at the application // level, above the implementation detail of views and models TodoList.Controller = function(){ this.todoList = new App.Todos.TodoList(); }; _.extend(TodoList.Controller.prototype, { // Start the app by showing the appropriate views // and fetching the list of todo items, if there are any start: function(){ this.showHeader(this.todoList); this.showFooter(this.todoList); this.showTodoList(this.todoList); this.todoList.fetch(); }, showHeader: function(todoList){ var header = new App.Layout.Header({ collection: todoList }); App.header.show(header); }, showFooter: function(todoList){ var footer = new App.Layout.Footer({ collection: todoList }); App.footer.show(footer); }, showTodoList: function(todoList){ App.main.show(new TodoList.Views.ListView({ collection : todoList })); }, // Set the filter to show complete or all items filterItems: function(filter){ App.vent.trigger('todoList:filter', filter.trim() || ''); } }); // TodoList Initializer // -------------------- // // Get the TodoList up and running by initializing the mediator // when the the application is started, pulling in all of the // existing Todo items and displaying them. TodoList.addInitializer(function(){ var controller = new TodoList.Controller(); new TodoList.Router({ controller: controller }); controller.start(); }); });

在这个应用中,Controller并没有给总体工作流添加太多东西。通常来说,按Marionette的观点,应用中的routers应该是深思熟虑后的成果。可是,开发人员经常滥用Backbone的路由系统,整个程序的工作流和逻辑都放到一个控制器里。

结果每种可能的代码组合都不可避免地放到了router方法中,创建view,加载model,协调应用中的不同部分等等。Drick觉得这破坏了单一职责原则 (SRP) 和 关注点分离原则。

Backbone的router和history是为了解决浏览器特定问题的 - 管理 forward 和 back 按钮。Marionette 认为应该把他们的权力关在笼子里,不让他们碰通过导航执行的代码。这样应用有没有router都能用。我们可以从按钮点击事件上,从应用的事件处理器上,或者从router上调用controller的show方法,并且不管如何调用哪个方法,我们最终得到的应用状态都是一样的。

Derick 把他对这一主题的想法都写在了他的blog上,你如果感兴趣可以去看看:

转载请注明:阿尤博客 » Marionette:Marionette App:Todo_路由器 AppRouter 及 Controller(三)

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

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

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