Доступ до $ батьківського батька $ parent у поданні з нокаутом - контекст вкладеності


80

Оновлено для стислості

Як я можу посилатися на $ батьківського батька $ у вкладеному нокауті 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 -->

Оригінал

Вибачте за заплутане запитання, але я намагаюся досягти другого рівня батьківського значення, щоб перевірити порівняння зі значенням у поточному контексті (як показано нижче), щоб показати інтервал лише у тому випадку, якщо воно відповідає $ батьківському значенню $ батьківського (тьфу!)

    <!-- 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 -->

Будь-яка допомога буде вдячна.


Я не розумію вашого запитання, що не працює? У чому ваша проблема: це синтаксис $parent.$parentабо який ви повинні використовувати, spanоскільки ви не можете об’єднати символи foreachта if?
nemesv

Відповіді:


136

Використовуйте $parentsмасив, як би дідусь і бабуся $parents[1]. Ви також можете використовувати, $rootякщо grandParentоб’єкт у вашому прикладі є найвищим батьком.

З документів :

$ батьків

Це масив, що представляє всі батьківські моделі подання:

$ parent [0] - це модель подання з батьківського контексту (тобто це те саме, що $ parent)

$ батьків [1] - це модель подання з контексту бабусь і дідусів

$ батьків [2] - це модель подання з контексту прадіда

… і так далі.

$ root

Це основний об'єкт моделі перегляду в кореневому контексті, тобто найвищий батьківський контекст. Зазвичай це об’єкт, який передається ko.applyBindings. Це еквівалентно $ батькам [$ parent.length - 1].


З якихось причин $parent.$parentу мене не вийшло, проте це рішення працювало нормально, і воно також коротше!
PeterM

8

Можна використовувати $parentContext.$parent.

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


0

Думаю, було б простіше використовувати параметр noChildContext таким чином:

Використання "як" без створення дочірнього контексту

Поведінка параметра за замовчуванням - це додавання імені для поточного елемента, одночасно прив’язуючи вміст до елемента. Але ви можете залишити за краще не змінювати контекст і встановлювати лише ім'я поточного елемента. Ця остання поведінка, ймовірно, буде типовою у наступній версії 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>

Детальніше читайте тут

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.