marionette - Marionette 、路由器和 Controller 配置的新手

Question

我一直在查看各种 Marionette 问题，但没有找到我想要的，希望有人能给我一些合理的建议和一些建议。我是新手，只是想在我在 github 上选择的样板启动包上构建

https://github.com/coombsj/RequireJS-BackboneJs-MarionetteJS-Bootstrap_Starter

我想确定两件事；

1. 如何为 afor 引用的项目创建路由和 Controller 配置 - 请参阅下面解释的示例。？？
2. 使用相同的引用项目我如何在模板页面中包含或使用 jquery，例如页面文档准备好显示警告框？？

它有一个导航结构和几个我得到的定义的区域，但除了 LandingView.html 之外，导航不会加载 contentRegion 中的任何页面。

这似乎是现在创建的模板页面( Handlebars )，我对它们没问题，但很难正确创建路由和 Controller 部分。

目前，Router.js 看起来像这样

define(['marionette', 'app/Controller'],
    function (marionette, Controller) {
        'use strict';

        return marionette.AppRouter.extend({
            appRoutes: {
                'test'      : 'testView',
                '*action'   : 'logAction'
            },
            controller: Controller
        });
    });

和 Controller.js

define(['app/views/LandingView'],
    function (LandingView) {
        "use strict";

        return {
            logAction: function (action) {
                console.log(action);
                S2C.content.show(new LandingView());
            }
        };
    });

define(['app/views/testView'],
    function (testView) {
        "use strict";

        return {
            testView: function (test) {
                console.log(action);
                S2C.content.show(new testView());
            }
        };
    });

LandingPage 加载正常

LandingView.js

define(['marionette', 'tpl!app/views/_templates/LandingView.html'],
    function (Marionette, template) {
        "use strict";

        return Marionette.ItemView.extend({
            template: template()

        });
    });

LandingView.html

<div style="background-color:#6CF">
<h2>
    This is the home page
</h2>
</div>

我的 testView 没有加载

testView.js

define(['marionette', 'tpl!app/views/_templates/testView.html'],
    function (Marionette, template) {
        "use strict";

        return Marionette.ItemView.extend({
            template: template()
        });

    });

testView.html

<form class="form-inline" id="testForm" method="post" action="#">
    <div>
        <input type="text" name="name" accesskey="s" size="30"
               value=""/>
        <input type="submit" value="Find"/>
    </div>
</form>

提前感谢您的帮助。迈克

Answer 1

这里有一些资源可以帮助您开始您的 Marionette 之旅:

• 在我关于 Marionette 的书的免费示例中讨论了路由:http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
• Brian Mann 在这里的免费截屏视频中介绍了显示对话框:http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions
• Derick Bailey 在博客文章中讨论了对话管理:http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

这些应该会让你走上正确的道路。

更多信息:

• 你不使用模板来做事，你会使用 View 或 Controller ，这取决于上下文。例如，在 View 中，您可以在 event 对象中声明一个处理程序，该处理程序将启动警报(或运行一些 jQuery 代码)，例如 https://github.com/davidsulc/marionette-gentle-introduction/commit/d63ccd041aba74e972c0fa93264c45c47e6f2e6e
• 您还可以(例如)在呈现时在 View 中执行 javascript 库:https://github.com/davidsulc/marionette-gentle-introduction/commit/2f80a63fa79d4779e82b16845ec8f0871e5797c7 (参见文件 assets/js/common/views.js)
• 路由器和 Controller 是个大主题，在链接示例中对其进行了深入解释

你到底遇到了什么问题？