Использование внешнего шаблона в KnockoutJS - PullRequest
Новая
       28

Использование внешнего шаблона в KnockoutJS

15 голосов
/ 28 февраля 2012

возможно ли использовать внешний шаблон в KnockoutJS, как этот? 

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

Я пробовал это решение, но оно не заработало.

Ответы [ 4 ]

23 голосов
/ 28 февраля 2012

Вы можете использовать jquery для динамической загрузки html в элемент скрипта, а затем выполнить на этом основе нокаут. 

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

Ваша привязка выбивки должна быть выполнена в функции обратного вызова, в противном случае есть вероятность, что вы попытаетесь выполнить привязку до загрузки страницы

ОБНОВЛЕНИЕ Вот пример, который я кодировал на jsfiddle для демонстрации динамической загрузки: http://jsfiddle.net/soniiic/2HxPp/

6 голосов
/ 28 февраля 2012

Вы также можете посмотреть:

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

4 голосов
/ 03 мая 2013

Вы также можете использовать этот шаблон загрузчика для KO

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

Демонстрация MVC WebAPI https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo

Он использует соглашение о настройке конфигурации при использовании этой библиотекиhttps://github.com/AndersMalmgren/Knockout.BindingConventions

Это означает, что он автоматически поймет, что MyViewModel должен быть сопоставлен с MyView

. Он также хорошо подготовлен для работы в SPA * 1018.*

Отказ от ответственности: я автор трех упомянутых выше библиотек

2 голосов
/ 07 апреля 2014

Вот небольшое построение функции ответа soniiic: 

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

    });
}

Это автоматически загрузит все шаблоны вывода в ваш документ, при условии, что установлен их src и их тип "text / html". Передайте обратный вызов, чтобы получать уведомления, когда все шаблоны загружены. Не знаю, что произойдет, если какой-либо из них потерпит неудачу.

Пример использования: 

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