Externe Templates in KnockoutJS laden

Written on September 08, 2011

Will man die Templates für KnockoutJS in externe Files auslagern, kann man das wie folgt tun:

<script id="addCustomerTemplate" type="text/html" src="templates/customer/add.html"></script>
<script id='displayCustomerTemplate' type='text/html' src="templates/customer/display.html"></script>

<script type="text/javascript">
    ensureTemplates();
    function ensureTemplates() {
        var totalTemplates = $('script[type="text/html"]').length;
        var readTemplates = 0;
        $('script[type="text/html"]').each(function (idx, val) {
            $.get($(val).attr('src'), function (tmpl) {
                $(val).text(tmpl);
                readTemplates++;
                if (readTemplates == totalTemplates) {
                    ko.applyBindings(viewModel);
                }
            });
        });
    }

In den Templates selbst findet sich dann wieder normales HTML inkl. Color Coding und IntelliSense in VS.

Die Lösung basiert auf dem Posting von Ryan Niemeyer und dem Kommentar von "The Reverand".

DotNetKicks-DE Image