Ссылаясь на данные, переданные в шаблон с использованием $root
У меня есть шаблон:
<script id="segment-instructions" type="text/html">
<div data-bind="foreach: Conjunctions">
<!-- Deep hierarchy -->
<p data-bind="visible: !$root.hasAnyValidExpression($data)" />
</div>
</script>
И следующая разметка, где я ее использую:
<div class="tab-content" id="options-tabs">
...
<div data-bind="template: { name: 'segment-instructions', data: Instructions }"></div>
</div>
Вот как я применяю привязку:
var instructionsModel = new SegmentInstructionsModel();
...
ko.applyBindings({
GeneralOptions: generalOptionsModel,
Instructions: instructionsModel
}, $('#options-tabs').get(0));
Проблема в том, что $root
в шаблоне разрешается объект, переданный ko.applyBindings
(т.е. объект с GeneralOptions
а также Instructions
свойства), а не к объекту, указанному в template
привязка, которая является примером моего SegmentInstructionsModel
учебный класс.
Я мог бы решить это по крайней мере двумя способами, ни один из которых мне не нравится:
Продолжайте использовать
$root
в шаблоне, но переход к фактической модели представления, представленной шаблоном<p data-bind="visible: !$root.Instructions.hasAnyValidExpression($data)" />
Мне это не нравится, так как шаблон не должен беспокоиться о том, как структурируется объект над реальной моделью представления.
Использовать
$parents
массив<p data-bind="visible: !$parents[$parents.length - 2].hasAnyValidExpression($data)" />
Мне не нравится это по понятным причинам (по одной причине, он перестает работать, как только модель представления фактического шаблона передается
ko.applyBinding
)
Есть ли способ продолжать использовать $root
в шаблоне и не беспокоиться о тесной связи шаблона с тем, как его потребитель предоставляет ему данные?
1 ответ
В конце концов, используя $parents
Массив выглядит как путь, проходящий только снизу, а не сверху (что ненадежно, см. выше). То есть в моем случае это было бы что-то вроде
<p data-bind="visible: !$parents[3].hasAnyValidExpression($data)" />