0

HBS プラグインを使用してテンプレートを管理する方法については、こちらの例を参照してください。それは素晴らしい解決策のようです。@machineghost は、次のようなテンプレートを含めるために RequireJS を使用することを提案しています。

define(['template!path/to/someTemplate'], function(someTemplate) {
    var MyNewView = BaseView.extend({template: someTemplate});
    $('body').append(new MyNewView().render().el);
}

テンプレートを動的に切り替える必要があることを除けば、これは素晴らしいことです。以下は、私の意見の 1 つの例です。

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel',
    'collections/tablesCollection',
    'views/tablesView'
], function($, _, Backbone, tableModel, tablesCollection, tablesView) {
    var t = new tablesCollection(null, {url: 'applications-lab'});
    return new tablesView({ collection: t, template: 'applications-lab-template', url: 'applications-lab'});
});

ご覧のとおり、ビューがレンダリングされるときにテンプレートを渡しています。私が疑問に思っているのは、define使用するテンプレート パスを Backbone に伝えるステートメントに変数を渡すことができるかということです。私はバックボーン、特に RequireJS の初心者で、よくわかりません。提案は誰ですか？

4

1 に答える 1

1

予備メモ:

  • require.js はモジュール定義でパラメーターを許可しません。define は依存配列と定義関数を受け入れます:

    define(['dep1', 'dep2', ...], function(dep1, dep2) {
})
  • ビューを定義してインスタンス化し、その el を同じモジュールに注入することはしませんが、好みに合わせて自由に組み合わせてください

デフォルトのテンプレートを使用して単純なビューを定義するモジュールから始めましょう。たとえば、views/templated.jsとします。 

define(['backbone', 'hbs!path/to/defaultTemplate'], 
    function(Backbone, defaultTemplate) {

    var MyNewView = Backbone.View.extend({
        template: defaultTemplate,

        initialize: function(opts) {
            opts = opts || {};

            // use the template defined in the options or on the prototype
            this.template = opts.template || this.template; 
        }
     });

     return MyNewView;
});

あとは、require を使用してビュー定義とオプションのテンプレートをプルするだけです。

require(['views/templated', 'hbs!path/to/anotherTemplate'], 
    function(MyNewView, anotherTemplate) {

    // a view with the default template
    var v1 = new MyNewView();

    // a view with a new template
    var v2 = new MyNewView({
        template: anotherTemplate
    });
});

オーバーライドされたデフォルト テンプレートで新しいクラスを作成するには、新しいモジュール ( views/override.js )を定義します。

define(['views/templated', 'hbs!path/to/anotherTemplate'], 
    function(MyNewView, anotherTemplate) {

    var AnotherNewView = MyNewView.extend({
        template: anotherTemplate
     });

     return AnotherNewView;
});

最後に、新しい値を直接割り当てることで、特定のインスタンスのテンプレートをいつでも変更できます。

var v = new MyNewView();
v.template = tpl;

ビュー階層をシミュレートするフィドル: http://jsfiddle.net/nikoshr/URddR/

コードに戻ると、ブロックは次のようになります

require(['models/tableModel', 'collections/tablesCollection', 'views/templated', 'applications-lab-template'], 
    function(tableModel, tablesCollection, tablesView, tpl) {

    var t = new tablesCollection(null, {url: 'applications-lab'});
    var v = new tablesView({
        collection: t,
        template: tpl
        url: 'applications-lab'
    });

    // or, if you prefer and you don't render in initialize
    v.template = tpl;
});
于 2013-02-06T17:31:21.087 に答える