Question

有一个表格，其中在各个列的Header中应用了排序。

如果一个列排序正在进行/处理，同时用户点击其他列的排序。它没有适当的缩短行为。

<div class="table-col">
  Title
  <a href="#" class="image_rght" data-bind="click: function(data,event){app.viewModel.sort('Title')},css:{noclass: app.viewModel.sortBy()=='' && app.viewModel.sortDirection(),toggleup:app.viewModel.sortBy()=='Title'&& app.viewModel.sortDirection(),toggledown:app.viewModel.sortBy()=='Title'&& !app.viewModel.sortDirection()}"><img src="~/Content/images/up_down_arrow.png" /></a>
</div>
<div class="table-col">
  Date
  <a href="#" class="image_rght" data-bind="click: function(data,event){app.viewModel.sort('StartDate')}, css:{toggleup:app.viewModel.sortBy()=='StartDate'&& app.viewModel.sortDirection(),toggledown:app.viewModel.sortBy()=='StartDate'&& !app.viewModel.sortDirection()}"><img src="/Content/images/up_down_arrow.png" /></a>
</div>
<div class="table-col">
  Facility
  <a href="#" class="image_rght" data-bind="click: function(data,event){app.viewModel.sort('FacilityName')}, css:{toggleup:app.viewModel.sortBy()=='FacilityName'&& app.viewModel.sortDirection(),toggledown:app.viewModel.sortBy()=='FacilityName'&& !app.viewModel.sortDirection()}"><img src="/Content/images/up_down_arrow.png" /></a>
</div>

所以我想停下来，当其他的正在进行/过程时，其他事件的排序。

例如：用户点击标题进行排序，因为它的流程尚未完成，同时用户点击日期列，则日期列事件不应为标题排序尚未完成。

Answer 1

你的视图中有很多逻辑，这通常使事情变得复杂。首先将click处理程序添加到viewmodel。创建一个isSorting observable，您可以使用它来检查是否需要推迟更新。

这是最基本的形式：

var self = this;

self.sort = ko.observable("Title");
self.isSorting = ko.observable(false);

self.onClick = function(sortBy) {
  if (self.isSorting()) {
    // Queue logic
  } else {
    self.sort(sortBy);
  }
};

我建议使用辅助方法创建绑定到不同类别的事件侦听器。例如：

self.sortHandlerFor = function(sortBy) {
  return self.onClick.bind(self, sortBy);
};

您可以这样使用：

<a data-bind="click: sortHandlerFor('Title')"></a>
<a data-bind="click: sortHandlerFor('StartDate')"></a>

您可以在主动/被动状态逻辑上使用相同的想法：创建一个工厂方法，通过视图模型而不是视图返回计算的true或false。

sort个作业的队列逻辑与您的异步代码密切相关。如果您需要帮助，我建议您编辑问题以添加应用程序的这一部分。

在Knockout中停止兄弟姐妹活动

1 个答案: