新的牵线木偶,路由器和控制器配置

Question

我一直在看各种木偶问题而没有找到我追求的东西,并希望有人可以给我一些合理的建议和几个指针.我是新手,只是希望在我在github上选择的样板启动包上构建

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

我想建立两件事;

1. 如何为参考项目创建路由和控制器配置 - 请参阅下面解释的示例.
2. 如何使用相同的引用项目如何在模板页面中包含或使用jquery,诸如页面文档之类的任何内容都可以显示警告框？

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

这似乎是现在模板页面创建(手柄),我很好,但他们正在努力正确创建路由和控制器部分.

目前,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上的免费样本中讨论了路由: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/

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

更多信息:

• 你不使用模板来做事情,你可以使用视图或控制器,具体取决于上下文.例如,在视图中,您可以在event对象中声明将启动警报(或运行一些jQuery代码)的处理程序,请参阅https://github.com/davidsulc/marionette-gentle-introduction/commit/d63ccd041aba74e972c0fa93264c45c47e6f2e6e
• 你也可以在渲染时在视图中执行(例如)javascript库:https://github.com/davidsulc/marionette-gentle-introduction/commit/2f80a63fa79d4779e82b16845ec8f0871e5797c7(参见文件assets/js/common/views.js)
• 路由器和控制器是很大的主题,它们在链接的样本中进行了深入的解释

你究竟遇到什么问题？