天天看點

KnockoutJS 3.X API 第七章 其他技術(2) 使用擴充器來增加可觀察量(監控屬性)

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

建立擴充器涉及向ko.extenders對象添加一個函數。 函數接受observable本身作為第一個參數和第二個參數中的任何選項。 然後它可以傳回observable或傳回一些新的像一個計算的observable,它以某種方式使用原來的observable。

這個簡單的logChange擴充器訂閱了observable,并使用控制台寫入任何更改以及可配置的消息。

您将通過調用observable的extend函數并傳遞包含日志Change屬性的對象來使用此擴充器。

如果firstName observable值更改為Ted,那麼控制台将顯示名字:Ted。

此示例建立一個擴充器,該擴充器強制對可觀察對象的寫入被四舍五入到可配置的精度級别。 在這種情況下,擴充器将傳回一個新的可寫的計算可觀察,它将位于真正的可觀察的攔截寫入之前。

(round to whole number)

(round to two decimals)

UI源碼:

視圖模型源碼:

注意,為了自動從UI中删除被拒絕的值,有必要在計算的observable上使用.extend({notify:'always'})。 沒有這個,使用者可能輸入一個無效的newValue,當四舍五入得到一個不變的valueToWrite。 然後,由于模型值不會改變,是以在UI中沒有更新文本框的通知。 使用{notify:'always'}會導緻文本框重新整理(删除被拒絕的值),即使計算的屬性沒有更改值。

此示例建立一個擴充器,允許将observable标記為必需。 這個擴充器不是傳回一個新的對象,而是簡單地向現有的observable添加額外的子可觀察量。 因為observables是函數,它們實際上可以有自己的屬性。 但是,當視圖模型轉換為JSON時,子可觀察項将被删除,我們将隻剩下我們的實際observable的值。 這是一個很好的方法來添加隻與UI相關的附加功能,而不需要發送回伺服器。

視圖模型暈嗎:

多個擴充器可以在對可觀察者的.extended方法的單個調用中應用。

在這種情況下,required和logChange擴充器都會對我們的observable執行。

作者:smallprogram

出處:

http://www.cnblogs.com/smallprogram

感謝您的閱讀。喜歡的、有用的就請大哥大嫂們高擡貴手"推薦一下"吧!你的精神支援是部落客強大的寫作動力。歡迎轉載!另外,文章在表述和代碼方面如有不妥之處,歡迎批評指正。留下你的腳印,歡迎評論!