knockout.js ładowanie szablonów w czasie wykonywania

Question

Używam knockout.js z jego wbudowanym systemem szablonów. Definiuję szablony jako:

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

Następnie używam id szablonu, więc posiadanie tego jako części skryptu jest koniecznością.

Mam kilka z tych szablonów w mojej aplikacji do obsługi pojedynczych stron i ostatnio przeniosłem się do używania require.js w celu załadowania skryptów, które są wymagane tylko wtedy, gdy są wymagane. Chciałbym zrobić to samo z szablonami, najlepiej używając require.js, aby moje moduły mogły wyświetlać szablony jako zależności.

Jak to zrobić?

Answer 1

Używam wtyczki tekstowej require.js: http://requirejs.org/docs/api.html#text. Gdy masz już tekst szablonu, możesz go dołączyć do strony w nowym znaczniku skryptu (z typem, który jest text/html lub czymś innym niż javascript).

Właściwie używam zmodyfikowanego silnika szablonów, który bezpośrednio obsługuje łańcuchy, więc nie muszę dołączać dodatkowych znaczników skryptu do strony.

Mój kod wygląda mniej więcej tak:

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; 
      }); 
     } 
    }; 

stringTemplateEngine że używam wygląda następująco: https://github.com/rniemeyer/SamplePresentation/blob/master/js/stringTemplateEngine.js