3

ページ上の任意の (または複数の) DOM ノードに配置できる自己完結型の「ウィジェット」として Knockout ViewModel を使用しようとしています。Backbone でうまく機能しているように見えるアプローチがあり、そのコンセプトを Knockout に変換しようとしています。

バックボーン ビューでは、RequireJS テキスト プラグインを使用してテンプレートをプルし、el に挿入して、次のようにします。

define(['text!templates/myTemplate.html',], function(templateHTML){
    var view = Backbone.View.extend({

        initialize:function() {
            // yes I know the underscore templating stuff doesn't apply in Knockout
            this.template = _.template( templateHTML );
            this.render();
        },

        render:function( ) {
            // the $el is provided by external code. See next snippet
            this.$el.append(this.template(myData));
            return this;
        }

        // other view behavior here

    });

    return view;
});

そして、他の外部コードによって、そのビューを既存の DOM ノードに配置できます。

new MyBackboneView({el: $('#myExistingDivID')});

Knockout では、このアプローチに最も近い方法は、外部コードで Text プラグインを使用してテンプレートを取得し、それを div に挿入してから、KO バインディングを適用することです。

var mydiv = $('#myExistingDivID');
mydiv.html(myTemplateHTML);
ko.applyBindings(new MyKOViewModel(), mydiv[0]);

1 - バックボーンの「el」コンセプトに相当するものに基づいて、ビューモデル自体に外部テンプレート HTML を挿入させるためのノックアウトで推奨される方法はありますか? 重要なのは、外部 (ルーターっぽい) コードがコンテンツの配置場所を制御することですが、ViewModel はコンテンツの実際の詳細とテンプレートの取得場所を制御します。

2 - はいの場合、このアプローチを取るべきですか、それとも Knockout と MVVM の使用方法を悪用しているのでしょうか?

4

1 に答える 1

1

デフォルトのテンプレートソースをオーバーライドして、次のようなデフォルトのレンダリングエンジンで使用できます。

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new StringTemplateSource(template);
};
ko.setTemplateEngine(stringTemplateEngine);

私がした簡単な例

http://jsfiddle.net/3CQGT/

于 2013-03-16T19:25:41.730 に答える