Я создал html-страницу с некоторыми внутренними шаблонами. Смотрите URL-адрес jsfiddle:Лучший способ использовать внешние шаблоны с нокаутом
http://jsfiddle.net/hoven002/jQTDH/
Каков наилучший способ сделать шаблоны внешнего и как?
С уважением, Кеннет
Лучший способ, на мой взгляд, использовать этот плагин: https://github.com/ifandelse/Knockout.js-External-Template-Engine.
Включает новый механизм шаблонов, который вытаскивает шаблоны из внешних файлов. Он также имеет некоторые параметры конфигурации, чтобы определить, из чего извлекаются шаблоны.
Я написал функцию, которая загружает шаблоны без какой-либо зависимости, но jQuery. Вы должны пометить теги <script>, которые вы хотите динамически загрузить атрибутом data-template-src, и поместите туда путь к вашему HTML-файлу. Ниже приведен код и пример.
Внимание: так как он использует AJAX для загрузки шаблонов, он нужен сервер HTTP (он не будет работать локально с file:// протоколом)
// Loads all the templates defined with the tag data-template-src.
// Returns a promise that fulfills when all the loads are done.
function loadTemplates() {
var templateLoads = [];
$('[data-template-src]').each(function() {
var templateElement = $(this);
var templateUrl = templateElement.attr('data-template-src');
// Load the template into the element and push the promise to do that into the templateLoads array
templateLoads.push(
$.get(templateUrl)
.done(function (data) {
templateElement.html(data);
})
);
});
return $.when.apply($, templateLoads);
}
// When all templates are loaded, apply bindings
loadTemplates().done(function() {
ko.applyBindings({}, document.getElementById("htmlDoc"));
});
<html id="htmlDoc">
<body>
<div data-bind="template: { name: 'exampleTemplate' }"></div>
<script type="text/html" id="exampleTemplate" data-template-src="/assets/exampleTemplate.html"></script>
<script src="/jquery.js"></script>
<script src="/knockout.js"></script>
<script src="/main.js"></script>
</body>
</html>
<h1>Hello world</h1>
<div data-bind="template: { name: 'exampleSubTemplate' }"></div>
<h2>How do you do?</h2>
Благодаря Райан, Так что я должен сделать это в моем HTML: <сценарий SRC = "скрипты/JQuery-1.7.2.js"> < скрипт src = "scripts/jquery-ui-1.8.20.js"> А потом я могу создавать внешние файлы шаблонов. Должен ли я использовать jquery-tmpl или я могу использовать только механизм шаблонов? Знаете ли вы, есть ли (в Fiddle) пример вышеупомянутого метода? – Kessi
Если вы используете версию '_all.js', вам не нужно использовать TrafficCop или инфузор, поскольку они включены. В противном случае, у вас все в порядке. Не уверен, есть ли скрипка, потому что часть AJAX трудно подделать. Однако в репозитории есть пример. –
Вам также не нужно использовать шаблоны jQuery. Вы можете использовать собственные шаблоны. –