knockout.js - 在容器内使用 Knockout 绑定(bind)多个 span 标签，仅渲染第一个元素

Question

这个问题已经有答案了:

Why last name does not show in Knockout js sample (1 个回答)

已关闭 10 年前。

鉴于此 knockout 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 标签并使用注释语法，它会很好地呈现两个绑定(bind):

<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 不喜欢没有结束标签。