淘汰赛不绑定多个跨度？答案

【问题标题】：Knockout not binding multiple spans?淘汰赛不绑定多个跨度？
【发布时间】：2014-08-26 23:46:26
【问题描述】：

我正在使用 knockout.js 将我的视图模型绑定到我的视图。

奇怪的是，绑定似乎无法正常工作，我不知道为什么。

<table class="matches" data-bind="visible: matches().length > 0">
        <thead>
            <tr>
                <th>Customer Details</th>
                <th>Customer Details 2</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: matches">
            <tr data-bind="click: $root.goToCustomerMatching">
                <td data-bind="with: customer">
                    <p>
                        <b data-bind="text: description" />
                        <span data-bind="text: addressLine1" /><br />
                        <span data-bind="text: addressLine2" /><br />
                        <span data-bind="text: addressLine3" /><br />
                        <span data-bind="text: addressLine4" /><br />
                        <span data-bind="text: postcode" /><br />
                        <i>(<span data-bind="text: customerAccountNumber" />)</i>
                    </p>
                </td>
                <td data-bind="with: match">
                    <p>
                        <b><!--ko text: customerCode--><!--/ko--></b><br />
                        <span data-bind="text: addressLine1" /><br />
                        <span data-bind="text: addressLine2" /><br />
                        <span data-bind="text: addressLine3" /><br />
                        <span data-bind="text: addressLine4" /><br />
                        <span data-bind="text: addressLine5" /><br />
                        <span data-bind="text: postcode" /><br />
                        <span data-bind="text: domain" />
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

matches 是一个observableArray。

第一个绑定有效，并显示描述（两次！？）其余绑定失败，甚至没有生成 HTML。

但是，当对第一个绑定使用无容器标记（html cmets）时，第一个和第二个绑定有效。您可以在第二列中看到这一点。

我真的不明白为什么会发生这种情况，而且我不想对所有内容都使用无容器标记，所以任何想法都将不胜感激！

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

我仍然不知道为什么这是一个问题，因为我发现这个解决方案的唯一参考是一个与旧版本 IE 上的空白无关的问题。我在 Chrome 和 Firefox 上测试过，所以....

我发现使用显式打开和关闭标签是有效的。例如

<b data-bind="text: description"></b>

工作，但是

<b data-bind="text: description"/>

没有。

任何关于为什么的线索都会受到赞赏:)

【讨论】：