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>

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

这是我的fiddle。

Answer 1

您可以使用computed observable来实现split：

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

然后让View迭代：

<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变量中。

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

1 个答案: