ノックアウトソート可能 - ソート可能なリストが更新されたことを知る方法

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またはvisibleバインディングがある通知を追加します。

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

編集：Fiddle