Knockout Binding с виртуальными элементами не работает

Я работаю над некоторыми пользовательскими привязками, и в одной из них я хотел бы иметь возможность отображать таблицу из некоторых массивов строк.

скрипка

Я упростил его до этой пользовательской привязки:

ko.bindingHandlers.table = {
    init: function tableBinding(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        element.innerHTML = tableTemplate;

        var innerBindingContext = bindingContext.createChildContext(valueAccessor());

        ko.applyBindingsToDescendants(innerBindingContext, element);

        return {
            controlsDescendantBindings: true
        };
    }
};

Это содержимое шаблона:

<!-- if: head && head.length -->
<thead>
<tr data-bind="foreach: head">
    <th data-bind="text: $rawData">not working th</th>
</tr>
</thead>
<!-- /ko -->

<tbody data-bind="foreach: rows">
<tr data-bind="foreach: $data">
    <td data-bind="text: $data">not working td</td>
</tr>
</tbody>

И несколько примерных данных.

ko.applyBindings({
    table: {
        head: ["Name", "Position"],
        rows: [
            ["John", "Janitor"],
            ["Mike", "IT"],
            ["Paul", "HR"],
            ["Rick", "Coffee Fetcher"]
        ]
    }
});

Я использую Knockout 3.0, однако все, что работает на Knockout 2.x, будет работать и здесь. Если вы посмотрите на скрипку, часть <thead> отображается правильно, а привязки к телу — нет. Он отлично работает, если я встраиваю шаблон и использую привязку with, например, with: table.


javascript knockout.js custom-binding bindinghandlers
person Brigand    schedule 10.11.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Должен признаться, в данный момент я не слежу за всем, что вы здесь делаете, но я могу сказать достаточно, что ваш пример будет работать, если в вашем операторе if используется ko if:, а не только if:.

http://jsfiddle.net/AhLzS/1/

Итак, вместо этого:

<!-- if: head && head.length -->

пойти с этим:

<!-- ko if: head && head.length -->

Синтаксис привязки без контейнера требует <!-- ko ... --> ... <!-- /ko --> в качестве виртуального контейнера. Таким образом, если в синтаксисе комментария html есть только <!-- if ... -->, нокаут не делает ничего особенного.

Из документации по нокауту для привязки "if":
http://knockoutjs.com/documentation/if-binding.html

Комментарии <!-- ko --> и <!-- /ko --> действуют как маркеры начала/конца, определяя «виртуальный элемент», который содержит разметку внутри. Knockout понимает синтаксис этого виртуального элемента и выполняет привязку, как если бы у вас был настоящий элемент-контейнер.

person mg1075    schedule 10.11.2013
comment
Спасибо! Не знаю, почему это может вызвать проблему, но это решает ее :-) - person Brigand; 10.11.2013
comment
@FakeRainBrigand - ответ обновлен с примечанием о синтаксисе безконтейнерного потока нокаута. - person mg1075; 10.11.2013
comment
Да, похоже, что <!-- /ko --> вызывал проблемы, потому что не мог найти открывающий тег комментария. Спасибо :-) - person Brigand; 10.11.2013