如何使用Knockout映射插件映射到來自服務器對象的數組並進行一些計算？

Question

在stackoverflow上閱讀了這篇題為“如何使用模板中的Knockout映射插件來映射到來自服務器對象的數組的交換”？ （對不起，stackoverflow使我對帖子的鏈接數有所限制）我試圖利用答案（jsFiddle： http : //jsfiddle.net/ueGAA/1 ）玩游戲

因此，練習的目的是要在Learn.knockoutjs.com上使用名為kockoutjs的教程，名為“加載和保存數據”，但要使用knockout映射。

問題是答案的一種視圖模型聲明，我喜歡將其轉換為待辦事項：

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。
問題是：如何以優雅的方式直接在viewmodel聲明中聲明incompleteTasks？ jsFiddle在這里http://jsfiddle.net/Yqg8e/

謝謝

Answer 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());​

注意使用var self = this; 甚至允許在內部匿名函數中訪問this上下文。

該技術在Knockout文檔的“ 可計算的可觀察對象 ”部分中進行了描述（跳到名為“ 管理'this'”的部分）。

這是更新的小提琴： http : //jsfiddle.net/Yqg8e/1/