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

Question

我有一个用逗号分隔的字符串的 observable。我想要做的是拆分 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>

问题是我真的不知道如何拆分它。如果您需要更多输入，请告诉我。

这是我的小提琴。

Answer 1

您可以使用计算的 observable来实现拆分：

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

然后让 View 迭代：

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

请参阅您的小提琴的这个分支以获得演示。

请注意，您需要为关键字设置适当的范围this，可能需要将其保存在变量中，例如self在您的实际应用程序中。