木偶，路由器和控制器配置的新手 [英] New to marionette, router and controller config

问题描述

我一直在研究各种木偶问题，但没有找到我想要的东西，希望有人可以给我一些合理的建议和一些建议.我对此并不陌生，只是想在我在github上选择的样板入门包中构建

I have been looking at the various marionette questions and not found what i'm after and was hoping someone could give me some sound advice and a couple pointers. I am new to this and just looking to build on the boilerplate starter pack i selected on github

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

我想建立两件事；

1. 如何创建路线和用于afor引用项目的contoller配置-请参阅下面说明的示例.
2. 使用相同的引用项目，我如何在模板页面中包含或使用jquery，诸如页面文档之类的任何东西都准备好了，所以显示一个警告框?

它具有导航结构，并定义了几个我可以获取的区域，但除LandingView.html之外，该导航不会在contentRegion中加载任何页面.

It has a navigation structure in it and a couple regions defined which i get but other than the LandingView.html the navigation doesn't load any pages in contentRegion.

这似乎取决于现在创建的模板页面(车把)，我可以接受，但是努力正确地创建路由和控制器部分.

This appears to be down to now template pages created (handlebars), i'm ok with them but struggling to create the routes and controller section correctly.

此刻， 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());
            }
        };
    });

目标网页加载正常

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>

在此先感谢您的帮助. 迈克

Thanks in advance for any help. Mike

推荐答案

以下是一些帮助您启动木偶之旅的资源:

Here are a few resources to start you on your Marionette journey:

我在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/

• routing is discussed in the free sample to my book on Marionette: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
• Brian Mann covers displaying dialog boxes in a free screencast here: http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions
• Derick Bailey discusses dialog management in a blog post here: http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

这些应该可以让您走上正确的道路.

These should set you on the right path.

更多信息:

• 您不使用模板来执行操作，而是根据上下文使用视图或控制器.例如，在视图中，您可以在event对象中声明一个处理程序，该处理程序将启动警报(或运行一些jQuery代码)，例如，参见https://github.com/davidsulc/marionette-gentle-introduction/commit/d63ccd041aba74e972c0fa93264c45c47e6f2e6e
• 您也可以在呈现它们时在视图中执行(例如)javascript库: https://github.com/davidsulc/marionette-gentle-introduction/commit/2f80a63fa79d4779e82b16845ec8f0871e5797c7 (请参阅文件asset/js/common/views.js)
• 路由器和控制器是一个很大的主题，在链接的样本中对其进行了深入的解释

• you don't use templates to do things, you'd use views or controllers, depending on context. For example, in a view, you could declare a handler within the event object that will launch an alert (or run some jQuery code) see for example https://github.com/davidsulc/marionette-gentle-introduction/commit/d63ccd041aba74e972c0fa93264c45c47e6f2e6e
• you can also have (e.g.) javascript libraries executed within view when they are rendered: https://github.com/davidsulc/marionette-gentle-introduction/commit/2f80a63fa79d4779e82b16845ec8f0871e5797c7 (see file assets/js/common/views.js)
• routers and controllers are big subject, and they are explained in depth within the linked sample

您到底在遇到什么问题?

What exactly are you having trouble with?

这篇关于木偶，路由器和控制器配置的新手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！