#jquery-templates #knockout.js
#jquery-шаблоны #knockout.js
Вопрос:
У меня есть шаблон jQuery, и я хотел бы использовать шаблон KnockoutJS в этом.
Я не могу заставить это работать, как показано в этом примере:http://jsfiddle.net/maate/bwmcR/1 /.
Однако это работает, когда сам шаблон KnockoutJS помещается за пределы шаблона jQuery, как в этом примере:http://jsfiddle.net/maate/bwmcR/2 /.
Похоже, что проблема связана с областью действия переменных данных шаблона (например, я могу получить доступ к ${test} переменной внутри subTemplate ).
Кто-нибудь знает, как заставить это работать?
Бр. Мортен
Комментарии:
1. Не могли бы вы немного прояснить свой вопрос.. кажется, у вас есть работающий код.
Ответ №1:
Первый приведенный вами пример просто недопустим. Хотя вы хотите создать вложенный шаблон, он должен быть в отдельном теге script. Вы просто не можете встраивать шаблоны друг в друга, вы должны создавать их один за другим. НЕПРАВИЛЬНО:
<script id="superTemplate" type="text/html">
...
<script id="subTemplate" type="text/html">
...
</script>
</script>
ПРАВИЛЬНО:
<script id="superTemplate" type="text/html">
...
</script>
<script id="subTemplate" type="text/html">
...
</script>
Когда вы применили вложенный шаблон в ul, вы определили, какие данные он должен использовать с foreach , поэтому вы не сможете прочитать test , поскольку это не свойство элемента.
Если вы хотите, вы можете передать его как templateOption, чтобы он был доступен и в subtemplate.
<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul>
Таким образом, он будет доступен на вложенном шаблоне.
<span data-bind="text: $item.testValue"></span>
Кроме того, я бы не стал использовать теги шаблона jQuery по умолчанию, это намного удобнее с привязкой к данным.
<div id="body" data-bind="template:{name: 'superTemplate'}"></div>
В конечном итоге это сделает то же самое, более или менее. Вы можете взглянуть здесь:http://jsfiddle.net/bwmcR/18