拆分可观察数组并在表格中垂直显示

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。