将多个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不喜欢它.