0

「テンプレートでKnockout Mappingプラグインを使用して、サーバーオブジェクトから配列にマップする方法は?」というタイトルのstackoverflowでのこの交換を読んでください。（申し訳ありませんが、stackoverflowが投稿のリンク数に制限を課しています）答えを利用してプレイしようとしました（jsFiddle：http://jsfiddle.net/ueGAA/1）

そのため、この演習は、learn.knockoutjs.com で「データの読み込みと保存」という名前のノックアウト js チュートリアルの todo を作成することでしたが、ノックアウト マッピングを使用していました。

問題は、私が好きな回答のビューモデル宣言の種類にあり、ここでは todo に置き換えられています。

var viewModel = 
{
    tasks : ko.mapping.fromJS(data),
    newTaskText: ko.observable(),
    incompleteTasks: ko.computed(function() {     
           return ko.utils.arrayFilter(this.tasks(), function(task) { return !task.isDone() });
    }),
    // Operations
    addTask:  function() {
        alert('Entering add task, count:' + this.tasks().length);
        this.tasks.push(new Task({ title: this.newTaskText() }));
        this.newTaskText("");
    },
    removeTask: function(task) { this.tasks.remove(task) }

}

ポイントはここです: ko.computed() の宣言内で、これはwindowを参照しています。さすがに普通。vewmodel 変数の後にko.computed() を宣言すると、正しい動作が得られます。

こちらです：

viewModel.incompleteTasks=ko.computed(function() {
    return ko.utils.arrayFilter(viewModel.tasks(), function(task) { return !task.isDone() });
});

匿名関数でオブジェクト viewModel を静的に参照するので、私はそれが好きではありません。
問題は、ビューモデル宣言で incompleteTasks をエレガントな方法で直接宣言する方法です。jsFiddle はこちらhttp://jsfiddle.net/Yqg8e/

ありがとう

4

1 に答える 1

1

ViewModel のオブジェクト リテラルの使用からコンストラクター関数の使用に切り替えます。 

function ViewModel() {
    var self = this;

    self.tasks = ko.mapping.fromJS(data);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {       
        return ko.utils.arrayFilter(self.tasks(), function(task) { 
            return !task.isDone()
        });
    });
    self.addTask = function() {
       alert('Entering add task, count:' + self.tasks().length);
       self.tasks.push(new Task({ title: self.newTaskText() }));
       self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) }
}

ko.applyBindings(new ViewModel());​

また、 which を使用すると、内部の無名関数内でもコンテキストvar self = this;にアクセスできることに注意してください。this

この手法は、Knockout ドキュメントのComputed Observablesのセクションで説明されています ( 「this」の管理というタイトルのセクションまでスキップしてください)。

更新されたフィドルは次のとおりです。http://jsfiddle.net/Yqg8e/1/

于 2012-09-02T13:29:00.360 に答える