拆分可觀察數組並在表格中垂直顯示

Question

我有一個用逗號分隔的字符串的可觀察值。我想要做的是拆分observable並綁定它，以便在表中垂直查看。我的觀點是如下：

<table> 
<tbody data-bind="foreach: dataOne"> 
    <tr> 
     <td data-bind="text: name1"></td><td >&nbsp;&nbsp;&nbsp;</td> 
    </tr> 
</tbody> 
</table> 

視圖模型是：

var data1 = [{ 
    name1: "one,two" 
}]; 

var viewModel = { 
    dataOne: ko.observableArray(data1)  
}; 

ko.applyBindings(viewModel); 

就目前而言，以簡化的東西我已經使用了foreach綁定給你演示。在我的代碼中，我使用了一個with綁定。使用with綁定的原因是因爲它代表用戶選擇的單個行。

那麼如何拆分observable並在表中垂直顯示結果項目，就像這樣？

one 
two 

這樣可以使用代碼嗎？

<table> 
<tbody data-bind="with: dataOne"> 
    <tr foreach: splittedArray> 
     <td data-bind="text: name1"></td><td >&nbsp;&nbsp;&nbsp;</td> 
    </tr> 
</tbody> 
</table> 

問題是我真的不知道如何分割它。如果您需要更多輸入，請告訴我。

這是我的fiddle。

Answer 1

可以使用computed observable實現split：

self.name1split = ko.computed(function() { 
    return self.name1.split(","); 
}); 

，然後讓搜索迭代：

<td> 
    <!-- ko foreach: name1split --> 
    <span data-bind="text: $data"></span><br /> 
    <!-- /ko --> 
</td> 

的演示中看到this fork of your fiddle。

請注意，您需要proper scoping for the this keyword，可能需要將其保存在實際應用程序中的變量中，例如self。