如何让 ko.compated 处理对象内的可观察值

我有一个相当简单的视图模型来保存数据数组并获取一个我想用来过滤数据的字符串。

我有一些非常简单的标记来渲染它，如下所示：

<section class="task-list">
    <ul data-bind="foreach:filteredRecords">
        <li>
            <label>Task name:</label>
            <span data-bind="text:TaskName"></span>              
        </li>
    </ul>
</section>

我已经建立了如下模型；

var viewModel = {

    searchText : ko.observable(''),
    taskData : ko.observableArray([]),

    searchData : function () {

        // use ko.utils.arrayFilter to limit records by searchText()
        return this.taskData();
    },

    filterRecords: ko.computed(this.searchData, this).extend({ throttle: 500 }),
};

ko.applyBindings(viewModel, $('.task-list')[0]); 

我得到的是

Uncaught Error: Pass a function that returns the value of the ko.computed 

将函数移回 ko:compulated 内部，如下所示：

 filteredRecords: ko.computed(function () {
        return this.taskData();
    },this).extend({ throttle: 500 })

只是给了我这个错误：

Uncaught TypeError: Object [object global] has no method 'taskData' 

因此尝试定义另一个属性来代替：

var viewModel = {

    _self : this,

    searchText : ko.observable(''),
    taskData : ko.observableArray([]),

    filteredRecords: ko.computed(function () {
        return this.taskData();
    },this).extend({ throttle: 500 })
};

但这现在给出了错误

Uncaught ReferenceError: _self is not defined 

最后我尝试这样做：

var viewModel = {

    searchText : ko.observable(''),
    taskData : ko.observableArray([]),

    filteredRecords: ko.computed(function() {
        var me = this;
        return function () {
            return me.taskData();
        }
    },this).extend({ throttle: 500 })
};

现在，这不会引发任何先前的错误，但也不会在 HTML 中产生任何结果......

我已经设置了一个小提琴 http://jsfiddle.net/7re34/

如何正确地将 ko.compulated 应用于对象，以便我可以使用对象内部的 observable 和 observableArray？

当您定义对象字面量时，在创建它之前您无法引用它的任何属性。的价值this不会成为你的新对象。

您可以使用构造函数，例如：

var ViewModel = function() {
   this.searchText = ko.observableArray();
   this.taskData = ko.observableArray([]);

   this.filteredRecords = ko.computed(function() {
        //filter logic here, can use `this` and reference searchText/taskData
    },this).extend({ throttle: 500 })
};

然后，创建它的一个新实例，如下所示：

ko.applyBindings(new ViewModel(), $('.task-list')[0]); 

否则，您可以创建您的viewModel首先在添加计算之前。然后做：

viewModel.filteredRecords = ko.computed(function() {
  //filter logic here, can use `this` and reference searchText/taskData
}, viewModel);

这个答案也可能有帮助：声明为对象文字与函数的剔除视图模型之间的区别 https://stackoverflow.com/questions/9589419/difference-between-knockout-view-models-declared-as-object-literals-vs-functions/9590133#9590133