KnockoutJS 3.X API 第七章 其他技术(6) 使用“fn”添加自定义函数

有时，您可能会通过向Knockout的核心值类型添加新功能来寻找机会来简化您的代码。 您可以在以下任何类型中定义自定义函数：





因为继承，如果你附加一个函数到ko.subscribable，它将可用于所有其他的。 如果你附加一个函数到ko.observable，它将被ko.observableArray继承而不是ko.computed继承。 要附加自定义函数，请将其添加到以下可扩展性点之一：

ko.subscribable.fn

ko.observable.fn

ko.observableArray.fn

ko.computed.fn

然后，您的自定义函数将可用于从该点开始创建的所有类型的值。 注意：最好仅将此可扩展点用于真正适用于各种场景的自定义函数。 如果你只打算使用一次，你不需要添加自定义函数到这些命名空间。

示例：可见数组的过滤视图

这里有一种方法来定义一个过滤器按属性函数，将在所有后续创建的ko.observableArray实例上可用：

ko.observableArray.fn.filterByProperty = function(propName, matchValue) {
return ko.pureComputed(function() {
var allItems = this(), matchingItems = [];
for (var i = 0; i < allItems.length; i++) {
var current = allItems[i];
if (ko.unwrap(current[propName]) === matchValue)
matchingItems.push(current);
}
return matchingItems;
}, this);
}

这返回一个新的计算值，它提供了数组的过滤视图，同时保持原始数组不变。 因为过滤的数组是一个计算的observable，所以当底层数组发生变化时，它将被重新计算。

以下实例演示如何使用此：

All tasks ( )

Done tasks ( )

UI源码：

<h3>All tasks (<span data-bind="text: tasks().length"> </span>)</h3>
<ul data-bind="foreach: tasks">
<li>
<label>
<input type="checkbox" data-bind="checked: done" />
<span data-bind="text: title"> </span>
</label>
</li>
</ul>

<h3>Done tasks (<span data-bind="text: doneTasks().length"> </span>)</h3>
<ul data-bind="foreach: doneTasks">
<li data-bind="text: title"></li>
</ul>

视图模型源码：

function Task(title, done) {
this.title = ko.observable(title);
this.done = ko.observable(done);
}
ko.observableArray.fn.filterByProperty = function(propName, matchValue) {
return ko.pureComputed(function() {
var allItems = this(), matchingItems = [];
for (var i = 0; i < allItems.length; i++) {
var current = allItems[i];
if (ko.unwrap(current[propName]) === matchValue)
matchingItems.push(current);
}
return matchingItems;
}, this);
}

function AppViewModel() {
this.tasks = ko.observableArray([
new Task('Find new desktop background', true),
new Task('Put shiny stickers on laptop', false),
new Task('Request more reggae music in the office', true)
]);

// Here's where we use the custom function
this.doneTasks = this.tasks.filterByProperty("done", true);
}

ko.applyBindings(new AppViewModel());

这不是强制性的

如果你倾向于过滤可观察的数组很多，添加一个filterByProperty全局可见的数组可能会使你的代码更整洁。 但是如果你只需要偶尔过滤，你可以选择不附加到ko.observableArray.fn，而只是手工构造doneTasks如下：

this.doneTasks = ko.pureComputed(function() {
var all = this.tasks(), done = [];
for (var i = 0; i < all.length; i++)
if (all[i].done())
done.push(all[i]);
return done;
}, this);