3

私はさまざまなマリオネットの質問を見てきましたが、私が求めているものを見つけられず、誰かが私にいくつかの健全なアドバイスといくつかの指針を与えてくれることを望んでいました. 私はこれに不慣れで、githubで選択したボイラープレートスターターパックに基づいて構築しようとしています

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

私は2つのことを確立したいと思います。

  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はロードされません

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>

助けてくれてありがとう。マイク

4

2 に答える 2