天天看點

KnockoutJS-自定義屬性綁定

  在knockoutjs中,已有的綁定功能已經十分強大,基本上可以不需要再去考慮擴充了,但是,也有例外的場景,面對這種場景,還是得去完成,knockoutJS提供了自定義綁定來擴充綁定功能。

  建立一個js檔案來嘗試綁定功能,按照給定的格式ko.bindingHandlers.xxx來擴充一個綁定。

   其次,在html中完成綁定即可,用法同自帶的綁定。

  此處需要注意的是,在自定義綁定中,init和update方法不是一定要全部定義,也可以隻定義其中一個。

  最後将js檔案引入,放置在knockoutjs下

  當綁定的監聽元素的發生改變時或是關聯的監聽元素改變時,knockout會回調update函數,隻要存在關聯的監聽元素改變,update函數都會被立馬回調,回調時會傳遞幾個參數到update函數中。

element:本次綁定的DOM元素

valueAccessor:一個JavaScript函數,通過valueAccessor()可以得到應用到這個綁定的model上的目前屬性值,使用valueAccessor()無需傳入參數,再通過調用ko.unwrap()并傳入valueAccessor()得到的屬性值可以拿到實際值。

allBindings:一個JavaScript對象,通過這個對象可以通路綁定的DOM元素上的所有屬性值,通過allBindings.get('屬性名')得到這個元素上指定屬性名的值,如果這個屬性不存在,則傳回undefined,或者通過allBindings.has(‘屬性名’)來判别該屬性是否存在于這個DOM元素上。

bindingContext: 目前元素的綁定上下文,通過該綁定上下文可以通路目前的綁定上下文内的屬性及該綁定上下文的父級上下文内、同級上下文内的屬性(功能十分強大)。

  例如,你可能想通過 visible綁定來控制一個元素的可見性,但是你想讓該元素在隐藏或者顯示的時候加入動畫效果。那你可以自定義自己的綁定來調用jQuery的slideUp/slideDown 函數:

   頁面上,直接按照格式完成綁定,此處,我将自定義檔案已經引入到模闆頁的js塊中。

   可以看到自定義綁定的效果,可以在多處地方完成綁定以實作代碼重用。  

  

KnockoutJS-自定義屬性綁定

  knockout在DOM元素使用自定義綁定的時候會調用你的init函數,init函數主要有兩個用途:

為DOM元素設定初始值

注冊事件句柄,例如當使用者點選或者編輯DOM元素的時候,你可以改變相關的observable值的狀态。

  init函數接收和update函數一樣的參數,按照上面的例子,改造一下,讓slideVisible在頁面第一次顯示的時候設定該元素的狀态(但是不使用任何動畫效果),以便于讓動畫在以後使用者改變的時候再執行。

   将viewModel中的giftWrap設定預設值為false,當頁面啟動後将會看見相應的Div直接是隐藏狀态,并在點選選中後才會顯示出來。

   

KnockoutJS-自定義屬性綁定

  已經掌握了使用update回調當observable值改變的時更新DOM元素。但是反過來的場景呢,例如當使用者對某個DOM元素做一些操作時,想更新相關的observable值。這可以通過使用init回調來注冊一個事件句柄,來改變相關的observable值。

  比如,當使用者點選輸入框時展示,離開時隐藏,同時修改監聽值,控制按鈕的啟用禁用。

  可以得到如下效果

KnockoutJS-自定義屬性綁定

  在虛拟元素上也可以使用自定義綁定

  至此,完成了自定義綁定的方式,雖然實際使用的少,諸如二八原則,但是隻要存在場景便可以發揮用武之地。

  代碼位址:https://gitee.com/530521314/Partner.TreasureChest.git