淘汰赛可排序 - 如何知道可排序列表已更新答案

【问题标题】：Knockout Sortable - How to know that the sortable list was updated淘汰赛可排序 - 如何知道可排序列表已更新
【发布时间】：2017-02-02 08:37:38
【问题描述】：

我需要在文档底部添加文本“列表已更新！”如果用户更新了可排序列表的顺序。

你能给我一些提示吗？如何正确地进行淘汰赛？

var Task = function(name) {
  this.name = ko.observable(name);
}

var ViewModel = function() {
  var self = this;
  self.tasks = ko.observableArray([
    new Task("Get dog food"),
    new Task("Fix car"),
    new Task("Fix fence"),
    new Task("Walk dog"),
    new Task("Read book")
  ]);
};

ko.applyBindings(new ViewModel());

div {
  padding: 5px;
  margin: 5px;
  border: black 1px solid;
}

ul {
  padding-bottom: 10px;
}

.container {
  float: left;
  width: 150px;
  background-color: #ffd;
}

.item {
  background-color: #DDD;
  cursor: move;
  text-align: center;
}

#results {
  float: left;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<script src="https://rawgit.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>

<script src="https://rawgit.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>




<div class="container" data-bind="sortable: tasks">
  <div class="item">
    <a href="#" data-bind="text: name"></a>
  </div>
</div>


<div id="results">
  <ul data-bind="foreach: tasks">
    <li data-bind="text: name"></li>
  </ul>
</div>

JSfiddle link

【问题讨论】：

标签： knockout.js knockout-3.0 knockout-sortable

【解决方案1】：

添加一个afterMove 处理程序来更新您的“已更新”标志。然后使用该标志来显示您的消息。

例如，

<div class="container" data-bind="sortable: { data: tasks,
                                              afterMove: setIsUpdated.bind($root) }">

var ViewModel = function() {
  this.tasks = ko.observableArray([
    new Task("Get dog food"),
    new Task("Fix car"),
    new Task("Fix fence"),
    new Task("Walk dog"),
    new Task("Read book")
  ]);
  this.isUpdated = ko.observable(false);
};
ViewModel.prototype.setIsUpdated = function () {
  this.isUpdated(true);
};

【讨论】：

【解决方案2】：

您可以通过订阅 observable 数组和新的 observable 来跟踪通知的可见状态。

self.isUpdated = ko.observable(false);
self.tasks.subscribe(function(value){
    self.isUpdated(true);
});

然后在您的任务元素下方添加一个带有 if 或可见绑定的通知。

<span style="color: red" data-bind="if: isUpdated">The list was updated!</span>

编辑：Fiddle

【讨论】：