knockout.js Laden von Vorlagen zur Laufzeit

Question

Ich benutze knockout.js mit seinem eingebauten Templating-System. Ich definiere die Vorlagen als so:

<script type="text/html" id="subjectItemView"> 
    <span class="name" data-bind="text: subjectName" /> 
</script> 

Ich benutze dann die ID der Vorlage diese so, wie sie Teil des Skripts ist eine Notwendigkeit.

Ich habe einige dieser Vorlagen in meiner Einzelseitenanwendung und bin kürzlich dazu übergegangen, require.js zu verwenden, um die Skripts zu laden, die nur dann benötigt werden, wenn sie benötigt werden. Ich möchte das Gleiche mit den Vorlagen tun, vorzugsweise mit require.js, damit meine Module die Vorlagen als Abhängigkeiten auflisten können.

Wie mache ich das?

Answer 1

Ich benutze das require.js Text Plugin: http://requirejs.org/docs/api.html#text. Sobald Sie den Vorlagentext haben, können Sie ihn an die Seite in einem neuen Skript-Tag anhängen (mit einem Typ, der text/html oder etwas anderes als Javascript ist).

Ich habe tatsächlich eine modifizierte Vorlagen-Engine verwendet, die Zeichenfolgen direkt verarbeitet, so dass ich keine zusätzlichen Skript-Tags an die Seite anhängen muss.

Mein Code sieht ungefähr so ​​aus:

this.activate = function() { 
     //load view model from the server 
     if (!this.loaded) { 
      require(["modules/" + name, "text!../templates/" + self.template + ".html"], function(Module, template) { 
       ko.templates[self.template] = template; 
       self.data(typeof Module === "function" ? new Module() : Module); 
       self.loaded = true; 
      }); 
     } 
    }; 

Die stringTemplateEngine, die ich benutze sieht aus wie: https://github.com/rniemeyer/SamplePresentation/blob/master/js/stringTemplateEngine.js