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);

posted @ 2016-10-19 11:13 SmallProgram 閱讀(1073) 評論(0) 收藏舉報

刷新頁面返回頂部

SmallProgram

Why join the navy if you can be a pirate!

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

示例：可見數組的過濾視圖

All tasks ( )

Done tasks ( )

這不是強制性的

公告

SmallProgram

Why join the navy if you can be a pirate!

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

示例：可見數組的過濾視圖

All tasks ( )

Done tasks ( )

這不是強制性的

公告

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