Question

假设我们使用Knockout并拥有observableArray，我们将其加载到一个简单的html表中。此数组中的每个项目都有一个复选框。

在表格的底部，我们有一个表单和一个按钮。在表单帖子上，我们希望将所有选定项目的ID发送到服务器。

我如何解决这个问题，所以我避免了一个细节问题？

我的想法：

选项＃1：

你可以在Knockout视图模型中创建一个字段，称为＆＃34; OrderList＆＃34;，它迭代数组中的所有项目，并构建一个以逗号分隔的列表，显示为隐藏字段，我们发布到服务器。

选项＃2：

每次检查一个项目时，我们都会在控制器上调用一个方法来存储服务器端。

关于我的想法的结论：

我找不到优雅的解决方案。第一个是有点细节，第二个需要大量的服务器端通信。

您通常如何以高效和干净的方式解决这个问题？

Answer 1

在我看来，使用绑定（这里使用knockout）的重点是拥有一个我们可以随时发送到服务器的结构，而无需从接口中获取数据的额外代码。 / p>

如果你不能这样做，我认为viewmodel和binding需要一些更新。

我必须说我不使用knockout的表单帖子，我更喜欢使用ajax调用而不发布页面/表单。

使用ajax调用，例如使用jQuery，将viewmodel作为JSON对象发送非常容易：

$.ajax({ url: 'http://stackoverflow.com/...',
         data: ko.toJSON(yourModel),
         //other stuff
})

对于表单帖子，我猜你可以使用包含你的viewmodel的value绑定来维护一个隐藏字段，如果需要的话（如果你需要的元素不在表单中）。

回到你的问题

为什么不直接发送整个observableArray，并解析数据服务器端只查找所选项目？

如果您希望以逗号分隔列表的形式发送数据，则可以使用如下计算的observable：

var orderList = ko.computed(function () {
    var arr = myObservableArray();
    var ol = "";
    for (var i = 0; i < arr.length; i++)
        if (arr[i].isChecked) ol += (ol.length > 0 ? ";" : "") + arr[i].Id;
    return ol;
}

以你的形式：

<input type="hidden" data-bind="value: orderList" id="myOrderList" />

每次更新observableArray时，都会更新计算的observable。

您可以阅读有关计算可观察量 here

的更多信息

Answer 2

我在viewmodel中有一个可观察的数组，比如说“orderList”，它应该包含所选项的id。我在viewmodel“fillOrderList”中定义了一个函数。我将所有复选框“checked”事件绑定到同一个函数“fillOrderList”。这个函数的作用是推送或删除[through：this.orderList.push() / this.orderList.remove()]“orderList”中的相关行id [当然，您可以访问每行的id并在其中使用它“fillOrderList”函数]。

这样，当单击按钮时，您基本上不必迭代或做任何事情，因为所选项目的ID将在可观察数组“orderList”中可用 - 您可以将其传递给服务器就是这样。

我希望这会有所帮助。

在表格帖子中发送Knockout中所选项目的列表

2 个答案:

回到你的问题