3

我正在尝试将 Knockout ViewModels 用作独立的“小部件”，可以将其放置到页面上的任何（或多个）DOM 节点中。我在 Backbone 中采用了一种似乎运作良好的方法，我正在尝试将这个概念转换为 Knockout。

在 Backbone 视图中，我会做这样的事情，使用 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 - 在 Knockout 中是否有推荐的方法让 ViewModel 本身基于 Backbone 的“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 回答