javascript - 更改 MarionetteJS 中的 "page"

Question

我目前正在开发一个大型 Backbone 应用程序(使用 marionetteJS)，并且在切换 View 或更改“页面”时涉及的最佳实践/模式方面遇到了一些架构问题。

Marionette 的布局和区域提供了一些非常出色的工具来进行 View 切换，例如 .show() 和 .empty() 方法。在我正在开发的应用程序中，我使用布局 View 作为所有其他 View 的容器，这允许我切换 View ，本质上是在应用程序内导航。

这很容易。对我来说，困难的部分是理解触发这些变化的最佳实践是什么。

以下是我提出的一些解决方案:

1. 当用户单击 ui 的特定部分(x 是要更改为的 View )时，会触发 page:change:x 事件。管理该 View 的 Controller 监听该事件并将其显示在应用程序主布局 View 中。

2. 当用户单击 ui 来更改页面时， View 会触发一个命令，并传入它希望 ui 更改为的 View ，例如 App.execute('page:change' ， View )。应用程序对象监听该触发器，并显示传递到应用程序主布局 View 中的 View 。

第一种方法的问题是 Controller 必须了解其范围内的每个页面(也许这不是一件坏事，我不知道)。例如:users-list-view、users-edit-view、users-profile-view 等。这也使得代码更难跟踪，因为到处都会触发事件。

第二种方法的问题是当前 View 必须知道应用程序也会更改的 View ，这对我来说似乎不太可扩展。

做这种事情有没有最佳实践？

编辑:

我应该澄清，这是与应用程序内导航相关的问题。不是使用路由器的初始负载。

Answer 1

多次遇到非常接近的问题，我的解决方案如下

1) Main - html页面中唯一的脚本，加载应用程序+路由器+ Controller 1) 应用程序 - 定义根区域，启动历史记录，2) AppRouter - 监视 url 匹配并调用 Controller 操作3) AppController - 保持操作哈希，使用自己的操作连接事件订阅(如 App:switchpage)，管理模型和 View 。

在代码中(我使用 requireJS 来按需加载):

ma​​in.js

define(
    [
        'application',
        'appRouter',
        'appController'
    ], 
    function(Application, Router, Controller) {
        var App = new Application;

        App.addInitializer(function() {
            this.controller = App.Controller;
            this.router = App.Router({
                controller: this.controller
            })
        })
    }
);

应用程序

define(
    [
        'marionette',
        'backbone'
    ], 
    function(Marionette, Backbone) {
        return Marionette.Application.extend({
            regions: {
               'main': '#body'
            },

            onStart: function() {
                Backbone.history.start()   
            }
        })
    }
);

appRouter

define(
    [
        'application'
    ], 
    function(Application) {

        Application.module('AppRouter', function(Module, App, Backbone, Marionette) {
            App.Router = Marionette.AppRouter.extend({
                //for example : page/home page/goods page/user
                appRouter: {
                    'page/*': 'switchPage'
                }
            })
        }) 
    }
);

appController

define(
    [
        'marionette'
    ], 
    function(Marionette) {

       Application.module('AppRouter', function(Module, App, Backbone, Marionette) {
            App.Controller = Marionette.Controller.extend({
                switchPage: function(path) {
                //path (user || home || some)
                    require(['views/'+path], function(pageView) {
                        App.main.show(new pageView)
                    })
                }
            })
        })
    }
);

页面/主页

define(
    [
        'marionette',
        'underscore'
    ], 
    function(Marionette, _) {
        return Marionette.ItemView.extend({
            template: _.template("home page")
        })
    }
);

它只是一个模型，我删除了部分代码以仅保留应用程序的想法。为了使其更具可扩展性，您可以将页面定义为具有自己的控件和依赖项的模块。

每晚建议您查看 Brian Mann 截屏视频 http://www.backbonerails.com/ ，特别是Engineering Rich, Single Page Apps并通过 project example 查看 David Sulc GitHub