Les modèles externes et "el" avec Knockout et RequireJS?

J'essaie d'utiliser Knockout ViewModels comme des "widgets" autonomes qui peuvent être placés dans n'importe quel (ou plusieurs) noeuds DOM sur la page. J'ai eu une approche dans Backbone qui semblait bien fonctionner et j'essaie de convertir le concept en Knockout.

Dans la vue Backbone, je ferais quelque chose comme ça, en utilisant le plugin de texte RequireJS pour extraire le modèle et l'injecter dans 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; }); 

Et puis, un autre code externe pourrait placer cette vue dans un nœud DOM existant:

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

Dans Knockout, le plus proche que je puisse trouver dans cette approche consiste à faire utiliser le code externe pour utiliser le plugin Text pour tirer le modèle, l'injecter dans le div, puis appliquer les liens KO:

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

1 – Existe-t-il un moyen recommandé de Knockout de voir le modèle ViewModel lui-même injecter le modèle externe HTML en fonction de l'équivalent de la notion "el" de Backbone? La clé est que le code externe (routeur-ish) contrôle le contenu sera placé, mais ViewModel contrôle les détails réels du contenu et où obtenir le modèle.

2 – Si oui, devrais- je prendre cette approche, ou est-ce que je abuse de la façon dont Knockout et MVVM sont destinés à être utilisés?

Vous pouvez remplacer la source du modèle par défaut, puis l'utiliser avec le moteur de rendu par défaut comme

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

Exemple rapide que j'ai fait

http://jsfiddle.net/3CQGT/