Доступ к родительскому объекту $ parent в режиме нокаута - контекст вложения

80

Обновлено для краткости

Как я могу ссылаться на родительский элемент $ parent во вложенном Knockout foreach / с привязками?

Пример -

    <!-- ko foreach: grandParent -->
        <tr>
            <!-- ko foreach: $parent.parents --> // <-- Doesn't work
                <!-- ko foreach: children -->
                    <td data-bind="if: favToy().name == $parent.$parent.favToy().name">
                        <span data-bind="text: favToy().name"></span>
                    </td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    <!-- /ko -->

Оригинал

Извините за сбивающий с толку вопрос, но я пытаюсь достичь родительского значения второго уровня, чтобы проверить значение в текущем контексте (как показано ниже), чтобы показать диапазон только в том случае, если он соответствует значению $ parent $ parent (тьфу!)

    <!-- ko foreach: grandParent -->
        <tr>
            <!-- ko foreach: $parent.parents -->
                <!-- ko foreach: children -->
                    <td data-bind="if: favToy().name == $parent.$parent.favToy().name">
                        <span data-bind="text: favToy().name"></span>
                    </td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    <!-- /ko -->

Было бы проще сделать так, но из того, что я читал, это невозможно или я делаю это неправильно :)

    <!-- ko foreach: grandParent -->
        <tr>
            <!-- ko foreach: $parent.parents -->
                <!-- ko foreach: children ? favToy().name == $parent.$parent.favToy().name -->
                    <td  data-bind="text: favToy().name"></td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    <!-- /ko -->

Любая помощь будет принята с благодарностью.

PW Kad
источник
Я не понимаю вашего вопроса, что не работает? В чем ваша проблема: синтаксис $parent.$parentили то, что вы должны использовать, spanпотому что вы не можете объединить foreachи if?
nemesv

Ответы:

136

Используйте $parentsмассив, дедушка или бабушка $parents[1]. Вы также можете использовать, $rootесли grandParentобъект в вашем примере является самым верхним родителем.

Из документов :

$ родители

Это массив, представляющий все родительские модели представления:

$ parent [0] - это модель представления из родительского контекста (т. е. такая же, как $ parent)

$ parent [1] - модель представления из контекста дедушки и бабушки.

$ parent [2] - это модель представления из контекста прадедов.

… и так далее.

$ корень

Это основной объект модели представления в корневом контексте, то есть самый верхний родительский контекст. Обычно это объект, переданный в ko.applyBindings. Эквивалентен $ parent [$ parent.length - 1].

Мэтт Берланд
источник
По какой-то причине $parent.$parentу меня не сработало, но это решение работало нормально, да и короче!
PeterM
8

Вы можете использовать $parentContext.$parent.

$parentContextобеспечивают много полезных свойств , таких как ( $data, $parent, $index, ...)

Хасан Альхадж
источник
0

Думаю, было бы проще использовать параметр noChildContext следующим образом:

Использование «as» без создания дочернего контекста

По умолчанию параметр as добавляет имя для текущего элемента, но при этом связывает содержимое с элементом. Но вы можете предпочесть оставить контекст без изменений и установить только имя текущего элемента. Это последнее поведение, вероятно, будет по умолчанию в будущей версии Knockout. Чтобы включить его для определенной привязки, установите для параметра noChildContext значение true. Когда этот параметр используется вместе с as, весь доступ к элементам массива должен осуществляться через заданное имя, и $ data останется установленным для внешней модели представления. Например:

<ul data-bind="foreach: { data: categories, as: 'category', noChildContext: true }">
    <li>
        <ul data-bind="foreach: { data: category.items, as: 'item', noChildContext: true }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
            </li>
        </ul>
    </li>
</ul>

Подробнее здесь

Cjohansson
источник