javascript - 与虚拟元素的 knockout 绑定(bind)不起作用

Question

我正在处理一些自定义绑定(bind)，我希望能够在其中显示一些字符串数组中的表格。

fiddle

我将其简化为这个自定义绑定(bind):

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 的东西在这里也适用。如果你看一下 fiddle ， <thead>部分显示正确，但正文的绑定(bind)未正确显示。如果我内联模板并使用 with ，它就可以正常工作。绑定(bind)，如 with: table 。

Answer 1

我必须承认，目前我并没有关注你在这里所做的一切，但我可​​以告诉你，如果你的 if ，你的例子就会起作用。语句使用 ko if:而不仅仅是if: .

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

所以代替这个:

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

按照这个:

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

无容器绑定(bind)语法需要 <!-- ko ... --> ... <!-- /ko -->作为虚拟容器。因此，如果 html 注释语法只有 <!-- if ... --> ， knockout 并没有做任何特别的事情。

来自“if”绑定(bind)的 knockout 文档:
http://knockoutjs.com/documentation/if-binding.html

The <!-- ko --> and <!-- /ko --> comments act as start/end markers, defining a “virtual element” that contains the markup inside. Knockout understands this virtual element syntax and binds as if you had a real container element.