Knockout observables提供了支持讀取/寫入值并在值改變時(shí)通知訂閱者所需的基本功能。 但在某些情況下，您可能希望向可觀察者添加其他功能。 這可能包括通過在可觀察者前面放置一個(gè)可寫的計(jì)算可觀察符來向可觀察或截取寫入添加額外的屬性。 敲除擴(kuò)展器提供了一種簡(jiǎn)單和靈活的方式來對(duì)可觀察者進(jìn)行這種類型的擴(kuò)充。

如何創(chuàng)建擴(kuò)展器

創(chuàng)建擴(kuò)展器涉及向ko.extenders對(duì)象添加一個(gè)函數(shù)。 函數(shù)接受observable本身作為第一個(gè)參數(shù)和第二個(gè)參數(shù)中的任何選項(xiàng)。 然后它可以返回observable或返回一些新的像一個(gè)計(jì)算的observable，它以某種方式使用原來的observable。

這個(gè)簡(jiǎn)單的logChange擴(kuò)展器訂閱了observable，并使用控制臺(tái)寫入任何更改以及可配置的消息。

ko.extenders.logChange = function(target, option) {target.subscribe(function(newValue) {console.log(option + ": " + newValue);});return target; };

您將通過調(diào)用observable的extend函數(shù)并傳遞包含日志Change屬性的對(duì)象來使用此擴(kuò)展器。

this.firstName = ko.observable("Bob").extend({logChange: "first name"});

如果firstName observable值更改為Ted，那么控制臺(tái)將顯示名字：Ted。

示例1：強(qiáng)制輸入為數(shù)字

此示例創(chuàng)建一個(gè)擴(kuò)展器，該擴(kuò)展器強(qiáng)制對(duì)可觀察對(duì)象的寫入被四舍五入到可配置的精度級(jí)別。 在這種情況下，擴(kuò)展器將返回一個(gè)新的可寫的計(jì)算可觀察，它將位于真正的可觀察的攔截寫入之前。

(round to whole number)

(round to two decimals)

UI源碼：

<p><input data-bind="value: myNumberOne" /> (round to whole number)</p> <p><input data-bind="value: myNumberTwo" /> (round to two decimals)</p>

視圖模型源碼：

ko.extenders.numeric = function(target, precision) {//create a writable computed observable to intercept writes to our observablevar result = ko.pureComputed({read: target, //always return the original observables valuewrite: function(newValue) {var current = target(),roundingMultiplier = Math.pow(10, precision),newValueAsNum = isNaN(newValue) ? 0 : +newValue,valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;//only write if it changedif (valueToWrite !== current) {target(valueToWrite);} else {//if the rounded value is the same, but a different value was written, force a notification for the current fieldif (newValue !== current) {target.notifySubscribers(valueToWrite);}}}}).extend({ notify: 'always' });//initialize with current value to make sure it is rounded appropriately result(target());//return the new computed observablereturn result; };function AppViewModel(one, two) {this.myNumberOne = ko.observable(one).extend({ numeric: 0 });this.myNumberTwo = ko.observable(two).extend({ numeric: 2 }); }ko.applyBindings(new AppViewModel(221.2234, 123.4525));

注意，為了自動(dòng)從UI中刪除被拒絕的值，有必要在計(jì)算的observable上使用.extend（{notify：'always'}）。 沒有這個(gè)，用戶可能輸入一個(gè)無效的newValue，當(dāng)四舍五入得到一個(gè)不變的valueToWrite。 然后，由于模型值不會(huì)改變，因此在UI中沒有更新文本框的通知。 使用{notify：'always'}會(huì)導(dǎo)致文本框刷新（刪除被拒絕的值），即使計(jì)算的屬性沒有更改值。

示例2：向可觀察者添加驗(yàn)證

此示例創(chuàng)建一個(gè)擴(kuò)展器，允許將observable標(biāo)記為必需。 這個(gè)擴(kuò)展器不是返回一個(gè)新的對(duì)象，而是簡(jiǎn)單地向現(xiàn)有的observable添加額外的子可觀察量。 因?yàn)閛bservables是函數(shù)，它們實(shí)際上可以有自己的屬性。 但是，當(dāng)視圖模型轉(zhuǎn)換為JSON時(shí)，子可觀察項(xiàng)將被刪除，我們將只剩下我們的實(shí)際observable的值。 這是一個(gè)很好的方法來添加只與UI相關(guān)的附加功能，而不需要發(fā)送回服務(wù)器。

UI源碼：

<p data-bind="css: { error: firstName.hasError }"><input data-bind='value: firstName, valueUpdate: "afterkeydown"' /><span data-bind='visible: firstName.hasError, text: firstName.validationMessage'> </span> </p> <p data-bind="css: { error: lastName.hasError }"><input data-bind='value: lastName, valueUpdate: "afterkeydown"' /><span data-bind='visible: lastName.hasError, text: lastName.validationMessage'> </span> </p>

視圖模型暈嗎：

ko.extenders.required = function(target, overrideMessage) {//add some sub-observables to our observabletarget.hasError = ko.observable();target.validationMessage = ko.observable();//define a function to do validationfunction validate(newValue) {target.hasError(newValue ? false : true);target.validationMessage(newValue ? "" : overrideMessage || "This field is required");}//initial validation validate(target());//validate whenever the value changes target.subscribe(validate);//return the original observablereturn target; };function AppViewModel(first, last) {this.firstName = ko.observable(first).extend({ required: "Please enter a first name" });this.lastName = ko.observable(last).extend({ required: "" }); }ko.applyBindings(new AppViewModel("Bob","Smith"));

應(yīng)用多個(gè)擴(kuò)展程序

多個(gè)擴(kuò)展器可以在對(duì)可觀察者的.extended方法的單個(gè)調(diào)用中應(yīng)用。

this.firstName = ko.observable(first).extend({ required: "Please enter a first name", logChange: "first name" });

在這種情況下，required和logChange擴(kuò)展器都會(huì)對(duì)我們的observable執(zhí)行。

轉(zhuǎn)載于:https://www.cnblogs.com/smallprogram/p/5976223.html

總結(jié)

以上是生活随笔為你收集整理的KnockoutJS 3.X API 第七章 其他技术(2) 使用扩展器来增加可观察量(监控属性)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。