Using an external Template in KnockoutJS

问题

is it possible to use an external Template in KnockoutJS like this?

<script type="text/html" id="a_template" src="templates/a_template.html">
</script>

I've tried this solution but didn't get it working.

回答1:

You could also look at:

https://github.com/ifandelse/Knockout.js-External-Template-Engine

回答2:

You can use jquery to dynamically load html into a script element, and then execute knockout based on that.

<script type="text/html" id="template_holder"></script>
<script type="text/javascript">
$('#template_holder').load('templates/a_template.html', function() {
  alert('Load was performed.');
  //knockout binding goes here
});</script>

Your knockout binding must be done in the callback function though, otherwise there's a chance that you'll be trying to bind before the page has loaded

UPDATE Here's an example I've coded on jsfiddle to demonstrate dynamic loading: http://jsfiddle.net/soniiic/2HxPp/

回答3:

You can also use this Template bootstrapper for KO

Bootstrapper https://github.com/AndersMalmgren/Knockout.Bootstrap

MVC WebAPI Demo https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo

It uses a Convention over configuration approuch using this lib https://github.com/AndersMalmgren/Knockout.BindingConventions

Meaning it will automatically understand that MyViewModel should be matched to MyView

Its also prepared to work nicely in a SPA

Disclaimer: I'm the author behind the 3 libs mentioned above

回答4:

Here's a little function building off of soniiic's answer:

function loadExternalKnockoutTemplates(callback) {
    var sel = 'script[src][type="text/html"]:not([loaded])';
    $toload = $(sel);
    function oncomplete() {
        this.attr('loaded', true);
        var $not_loaded = $(sel);
        if(!$not_loaded.length) {
            callback();
        }
    }
    _.each($toload, function(elem) {
        var $elem = $(elem);
        $elem.load($elem.attr('src'), _.bind(oncomplete, $elem));

    });
}

This'll automatically load all knockout templates on your document, provided their src is set and their type is "text/html". Pass in a callback to be notified when all templates loaded. No idea what happens if any of them fails.

Example usage:

 <head>
    <script type="text/html" src="kot/template1.html" id="template1"></script>

</head>
<body>
    <script>
        $(function() {
            loadExternalKnockoutTemplates(function() {
                // Put your ready code here, like
                ko.applyBindings();
            });
        });


        function loadExternalKnockoutTemplates(callback) {
            var sel = 'script[src][type="text/html"]:not([loaded])';
            $toload = $(sel);
            function oncomplete() {
                this.attr('loaded', true);
                var $not_loaded = $(sel);
                if(!$not_loaded.length) {
                    callback();
                }
            }
            _.each($toload, function(elem) {
                var $elem = $(elem);
                $elem.load($elem.attr('src'), _.bind(oncomplete, $elem));

            });
        }
    </script>
</body>

来源：https://stackoverflow.com/questions/9480697/using-an-external-template-in-knockoutjs

标签

templates

knockout.js

external

knockout-templating