Question

我有一个过去24个月从服务器返回的记录列表。用户可以选择“过去18个月”，“过去12个月”或“过去24个月”。

默认值为24个月，因此当用户第一次访问该页面时，将从服务器检索完整列表。现在，不使用回发（从而节省了到服务器的行程），我可以根据用户从选择菜单中选择的内容来过滤数据吗？

我正在使用ASP.NET MVC4和jQuery mobile以及knockout.js。

视图中的表格（html）：

        <table style="width:100%;">

<tbody data-bind="foreach: TankMixRows">
    <tr>
        <td data-bind="text: ProductName"></td>
        <td data-bind="text: AI"></td>
        <td></td>
        <td data-bind="text: MOAHerbicide"></td>
        <td data-bind="text: MOAInsecticide"></td>
        <td data-bind="text: MOAFungicide"></td>
    </tr>
</tbody>
    </table>

使用Javascript：

  function MOAViewModel() {
var self = this;

self.TankMixRows = ko.observableArray([]);

self.getTankMixRows = function () {
  $.ajax({
    type: "GET",
    url: '@Url.Action("jsonModeOfAction", "WorkOrders")',
    data: {
      ID: '@Model.RecFieldId'
    },
    success: function (data) {
      self.TankMixRows(data);
    }
  });
}

//Load initial state from server and populate viewmodel
self.getTankMixRows();
  }

  ko.applyBindings(new MOAViewModel());

Answer 1

首先，您需要客户端模型中的时间。完成后，您需要options作为日期过滤器。将它绑定到viewModel中的observable。让我们称之为：

self.filterDateSelection = ko.observable(24);

然后你可以制作一个过滤数据的计算数组：

self.filteredItems = ko.computed(function() {
    return ko.utils.arrayFilter(self.TankMixRows(), function(row) {
        // Filter logic here;
        // Return true if you want to keep the record
        // Use row.date and self.filterDateSelection()
        return true;

    });    
}

将您的视图绑定到filteredItems。

MVC的默认日期时间序列化可能会与您抗争。看一下： Converting .NET DateTime to JSON

<强>更新

看看以下小提琴：http://jsfiddle.net/mrfunnel/9eaMY/

我使用Moment.js来帮助处理javascript日期。

您可以使用上面提到的选项绑定进行月份过滤，以便将逻辑保留在Knockout中，并简化过滤器范围的计算。

// Possible options
self.filterMonths = ko.observableArray([12, 18, 24]);
// Selected option
self.chosenFilter = ko.observable(24);

这在视图中受到如下约束：

<p>Choose Month Filter:
    <select data-bind="options: filterMonths, value: chosenFilter"></select>
</p>

现在我们可以在每次selectedFilter更改时计算filterDate：

self.filterDate = ko.computed(function () {
    var d = moment().subtract('months', self.chosenFilter());
    return d;
});

然后可以按如下方式计算filteredItem：

self.filteredItems = ko.computed(function () {
    return ko.utils.arrayFilter(self.tankMixRows(), function (row) {
        // Filter logic here;
        // Return true if you want to keep the record
        return row.date > self.filterDate();
    });
});

客户端使用jquery，knockout过滤数据

1 个答案: