0

KnockoutJS を学ぶための簡単なリスト アプリを作成しています。今すぐタスクを追加できます。[削除] リンクをクリックすると、タスクがビューから削除されます。一番下に、ko.computed 関数を使用するタスクの数があります。タスクを追加すると更新されますが、タスクを削除しても番号は変わりません。以下のコードのどこが間違っているか知っている人はいますか?

ここに私のJSがあります：

$(function() {
var Todo = function (task, complete) {
    this.task = task;
    this.complete = complete;
}

var AppViewModel = function(todos) {
    var self = this;

    //Create an observable array of Todo objects
    self.toDoItems = ko.observableArray([
        { task: "Learn KnockoutJS", complete: false}
    ]);



    //Add a new todo
    self.add = function() {
        self.toDoItems.push(new Todo($('.txt').val()));
        $('.txt').val('');
    };

    //Remove a todo
    self.remove = function(item) {
        self.toDoItems.destroy(item);
    }

    //Mark a todo complete
    self.complete = function (item) {
        item.complete = true;
    }


    //Count active tasks
    self.remainingTasks = ko.computed(function() {
        return self.toDoItems().length;
    })
}

ko.applyBindings(new AppViewModel());

});

そして、これが私の見解です：

<h3>Tasks</h3>

<table>
<tbody data-bind="foreach: toDoItems">
    <tr>
      <td><input type="checkbox" data-bind="click: $root.complete"></td>
      <td class="todo-item"><label data-bind="text: task"></label></td>
      <td class="remove"><a href="#" data-bind="click: $root.remove">Remove</a></td>
    </tr>
 </tbody>
 </table>
 <br>
 <input class="txt" />
 <button data-bind="click: add">Add</button><br><br>
 There are <strong data-bind="text: remainingTasks"></strong> tasks here.<br>
4

2 に答える 2

2

ノックアウト オブザーバブル配列は、項目を削除する 2 つの方法を実装します:remove()は実際に項目を配列から削除し、destroy()は項目を「破棄済み」としてマークするだけでリストに保持します。したがって、おそらくremove()あなたが望むものではなく、次のdestroy()とおりです。

self.remove = function(item) {
    self.toDoItems.remove(item);
};
于 2013-06-17T21:22:48.090 に答える
1

.destroy実際に配列からアイテムを削除しない呼び出しを行っています。オブジェクトにプロパティを追加するだけです。これは、ドキュメントに記載されているように、 Rails 開発者の利便性を高めることを目的としています。

コードを call に変更すると.remove、アイテムは配列から削除されます。

例として jsFiddle を次に示します。

于 2013-06-17T21:21:53.203 に答える