Knockout Sortable - 如何知道可更新列表已更新

Question

我需要在文檔底部添加文本「列表已更新！」如果用戶更新了可排序列表的順序。

你可以給我提示如何正確地做到這一點，並在淘汰賽中？

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

Answer 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); 
}; 

Answer 2

爲此，您可以在訂購可觀測陣列和一個新的觀察到的跟蹤通知的可見狀態。

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