Ссылаясь на данные, переданные в шаблон с использованием $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 учебный класс.

Я мог бы решить это по крайней мере двумя способами, ни один из которых мне не нравится:

  1. Продолжайте использовать $root в шаблоне, но переход к фактической модели представления, представленной шаблоном

    <p data-bind="visible: !$root.Instructions.hasAnyValidExpression($data)" />
    

    Мне это не нравится, так как шаблон не должен беспокоиться о том, как структурируется объект над реальной моделью представления.

  2. Использовать $parents массив

    <p data-bind="visible: !$parents[$parents.length - 2].hasAnyValidExpression($data)" />
    

    Мне не нравится это по понятным причинам (по одной причине, он перестает работать, как только модель представления фактического шаблона передается ko.applyBinding)

Есть ли способ продолжать использовать $root в шаблоне и не беспокоиться о тесной связи шаблона с тем, как его потребитель предоставляет ему данные?

1 ответ

Решение

В конце концов, используя $parents Массив выглядит как путь, проходящий только снизу, а не сверху (что ненадежно, см. выше). То есть в моем случае это было бы что-то вроде

<p data-bind="visible: !$parents[3].hasAnyValidExpression($data)" />
Другие вопросы по тегам