Javascript 更改「；第页“；木偶

我目前正在开发一个大型主干应用程序（使用木偶技术），在切换视图或更改“页面”时涉及的最佳实践/模式方面存在一些架构问题

木偶网的布局和区域为视图切换提供了一些非常好的工具，例如

.show（）

和

.empty（）

方法。在我正在开发的应用程序中，我使用了布局视图作为所有其他视图的容器，这允许我在应用程序中切换视图，基本上是在应用程序中导航

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

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

当用户单击ui的某个部分（x是要更改的视图）时，将触发

页面：更改：x

事件。管理该视图的控制器侦听该事件，并将其显示在应用程序主布局视图中

当用户单击ui更改页面时，视图会触发一个命令，并传入它希望ui更改到的视图，如

App.execute（'page:change'，view）

。应用程序对象侦听该触发器，并显示传递到应用程序主布局视图的视图

第一种方法的问题是控制器必须知道其范围内的每个页面（我不知道这可能不是一件坏事）。例如：用户列表视图、用户编辑视图、用户配置文件视图等。这也使得代码更难跟踪，因为到处都会触发事件

第二种方法的问题是，当前视图必须知道应用程序也将更改的视图，这对我来说似乎不是非常可伸缩的

做这种事情有什么最佳实践吗

编辑：

---

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

有几次面临非常接近的问题，我的解决方案如下

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

在代码中（我使用requireJS按需加载）：

main.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()   
            }
        })
    }
);

认可者

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'
                }
            })
        }) 
    }
);

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)
                    })
                }
            })
        })
    }
);

appController

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'
                }
            })
        }) 
    }
);

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")
        })
    }
);

这只是一个模型，我删除了部分代码，只保留了应用程序的概念。为了使其更具可伸缩性，您可以将页面定义为具有自己的控件和DEP的模块

每晚推荐你去Brian Mann的screencast，尤其是

---

Derick建议用David Sulc GitHub结帐，也就是说，这个问题不适合SO，最好在。投票关闭。当我提到

page:change:x

或

App.execute

时，我实际上是在谈论默认情况下在marionettejs中实现的应用程序级事件聚合器。我实际上已经签出了这些链接，它们都非常好！你的例子很好，但我的问题更多的是关于用户单击ui中的某个元素和应用程序导航到不同页面之间发生的过程。有两种方法：在ul li中添加-在这种情况下，路由器+控制器将管理页面切换或删除应用程序触发器（“页面：切换”）在气泡li点击事件上的UL视图内，并在AppController上侦听“页面：切换”。我支持使用链接来导航链接Inks IMO是最好的方式，因为这意味着您可以在共享链接或在新选项卡中打开链接时重新导航到相同的页面状态。@Quince，绝对同意，感谢您的评论，忘记提及只有链接允许在f5上保持“应用程序状态”，后退和前进按钮单击链接才有意义，特别是在打开新标签页等方面。谢谢大家。