綁定多個span標籤僅渲染的第一個元素

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不喜歡它，當你沒有關閉標籤。