带有 Knockout 和 RequireJS 的外部模板和“el”？

Question

我正在尝试将 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 的预期使用方式？

Answer 1

您可以覆盖默认模板源，然后将其与默认渲染引擎一起使用，例如

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

我做的简单例子

http://jsfiddle.net/3CQGT/