Utilisation d'un modèle externe dans KnockoutJS

est-il possible d'utiliser un externe Modèle dans KnockoutJS comme ça?

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

J'ai essayé cette solution mais n'ont pas de travail.

source d'informationauteur KebdnK

  2. 23

    Vous pouvez utiliser jquery pour charger dynamiquement du code html à un élément de script, puis exécuter knock-out sur cette base.

    <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>

    Votre knock-out de liaison doit être fait dans la fonction de rappel bien, sinon il y a une chance que vous essayez de lier avant que la page est chargée

    Mise à JOUR Voici un exemple que j'ai codé sur jsfiddle pour démontrer le chargement dynamique: http://jsfiddle.net/soniiic/2HxPp/

  3. 4

    Vous pouvez également utiliser ce Modèle de programme d'amorçage pour KO

    Programme d'amorçage
    https://github.com/AndersMalmgren/Knockout.Bootstrap

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

    Il utilise une Convention over configuration approuch à l'aide de cette lib
    https://github.com/AndersMalmgren/Knockout.BindingConventions

    Signifie qu'elle va automatiquement comprendre que MyViewModel devraient être adaptés à Mavue

    Il est aussi prêt à travailler bien dans un SPA

    Disclaimer: je suis l'auteur derrière l'3 libs mentionné ci-dessus

  4. 2

    Voici une petite fonction de construction de soniiic réponse:

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

    });
}

    Cela va automatiquement charger tous les modèles knock-out sur votre document, à condition que leur src est définie et leur type est "text/html". Passer dans un rappel pour être averti lorsque tous les modèles chargé. Aucune idée de ce qui se passe si l'un d'eux tombe en panne.

    Exemple d'utilisation:

     <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>