3

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

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

我想建立两件事;

  1. 如何为 afor 引用的项目创建路由和控制器配置 - 请参阅下面解释的示例。??
  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 没有加载

测试视图.js

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

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

    });

测试视图.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>

提前感谢您的帮助。麦克风

4

2 回答 2

8

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

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

更多信息:

  • 您不使用模板来做事,而是使用视图或控制器,具体取决于上下文。例如,在视图中,您可以在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)
  • 路由器和控制器是一个大主题,它们在链接示例中进行了深入解释

你到底有什么问题?

于 2013-05-22T19:08:41.090 回答
0

非常感谢您的帮助和指点,因为被诊断出患有帕金森症,有些事情并不像以前那么容易,学习曲线似乎有点陡峭,但我想将我现有的一个基于查询/js 的网站转换为更扎实,更容易维护和扩展基础,并决定我认为这是至少尝试概念验证的正确方法。

为了回答您的问题,我只是尝试使用一个不错的样板示例,其中包括主干、要求、jquery 和引导程序。困难是我不一定从坏的起点知道好坏,我现在已经购买了你的书和其他几本书,让我稍微阅读一下,或者至少提供一个参考点。

我从 github 选择了一个起点,它勾选了要求框,但正如提到的不确定好坏或丑陋,所以想尝试按照它至少了解如何扩展提供的路由器和控制器 js 文件 - 我明白有点关键,需要真正深入研究。

示例https://github.com/coombsj/RequireJS-BackboneJs-MarionetteJS-Bootstrap_Starter仅从示例中的导航链接加载一页,尽管导航链接中有 3 个链接。

使用这个项目,我希望其他链接将其他页面加载到引用的内容区域中,并能够在页面加载时执行 javascript。

我希望这是有道理的,再次非常感谢。

于 2013-05-27T22:09:51.037 回答