在 Knockout 中停止兄弟事件答案

【问题标题】：Stop a sibling event in Knockout在 Knockout 中停止兄弟事件
【发布时间】：2017-01-30 11:27:40
【问题描述】：

有一个表格，其中在不同列的 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>

所以我想在另一个正在进行/处理时停止其他排序事件。

例如：用户点击Title进行排序，因为它的过程没有完成，同时用户点击Date列，那么日期列事件不应该被触发，直到标题排序未完成。

【问题讨论】：

当你说排序正在进行时 - 它是一个动画，还是你的排序功能异步运行并且只需要很长时间？

标签： sorting knockout.js knockout-2.0 knockout-3.0

【解决方案1】：

您的观点中有很多逻辑，这通常会使事情变得相当复杂。首先将点击处理程序添加到您的视图模型。创建一个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 作业的队列逻辑与异步代码密切相关。如果您需要帮助，我建议您编辑您的问题以添加应用程序的这一部分。

【讨论】：