Ответ 1
Вы также можете посмотреть:
https://github.com/ifandelse/Knockout.js-External-Template-Engine
Можно ли использовать внешний шаблон в KnockoutJS следующим образом?
<script type="text/html" id="a_template" src="templates/a_template.html">
</script>
Я пробовал это решение, но не работал.
Вы также можете посмотреть:
https://github.com/ifandelse/Knockout.js-External-Template-Engine
Вы можете использовать jquery для динамической загрузки html в элемент script, а затем выполнить нокаут на основе этого.
<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>
Связывание с нокаутом должно выполняться в функции обратного вызова, хотя в противном случае существует вероятность того, что вы попытаетесь связать до того, как страница загрузится.
UPDATE Здесь пример, который я закодировал на jsfiddle, чтобы продемонстрировать динамическую загрузку: http://jsfiddle.net/soniiic/2HxPp/
Вы также можете использовать этот загрузочный шаблон для KO
Загрузчик https://github.com/AndersMalmgren/Knockout.Bootstrap
MVC WebAPI Demo https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo
Он использует Конвенцию по настройке, используя эту библиотеку https://github.com/AndersMalmgren/Knockout.BindingConventions
Значение будет автоматически понято, что MyViewModel должен быть сопоставлен с MyView
Он также подготовлен к работе в SPA
Отказ от ответственности: я являюсь автором 3-х библиотек, упомянутых выше
Здесь небольшая функция, строящаяся от 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>