knockout.js - 将多个 span 标签与容器内的 Knockout 绑定仅呈现第一个元素

Question

鉴于这个淘汰赛javascript：

function TestModel(data) {
    this.Id = ko.observable(data.Id);
    this.Name = ko.observable(data.Name);
}

function TestView() {

    this.TestList= ko.observableArray([]);  

    this.TestList([{Id: 1, Name: 'One'},{Id: 2, Name: 'Two'}]);
}

ko.applyBindings(new TestView());

而这个HTML：

<div data-bind='foreach: TestList'>
    <p>
        <span data-bind="text: Id" />
        <span data-bind="text: Name" />
    </p>
</div>

我希望它呈现如下：

<div>
    <p>
        <span>1</span>
        <span>One</span>
    </p>
    <p>
        <span>2</span>
        <span>Two</span>
    </p>
</div>

但相反，它看起来像这样：

<div>
    <p>
        <span>1</span>
    </p>
    <p>
        <span>2</span>
    </p>
</div>

如果我更改 Html 以便每个span都在它自己的p标签中，它确实会渲染它们。

<div data-bind='foreach: TestList'>
    <p>
        <span data-bind="text: Id" />
    </p>
    <p>
        <span data-bind="text: Name" />
    </p>
</div>

此外，如果我删除 span 标签并使用注释语法，它会很好地呈现两个绑定：

<div data-bind='foreach: TestList'>
    <p>
        <!--ko text: Id--><!--/ko-->
        <!--ko text: Name--><!--/ko-->
    </p>
</div>

为什么第二个span标签在第一个示例中没有呈现？

Answer 1

改变这个：

<span data-bind="text: Id" />

对此：

<span data-bind="text: Id"></span>

根据我的经验，当您没有结束标签时，KO 不喜欢它。