首頁 > web前端 > js教程 > Knockout自訂綁定建立方法_javascript技巧

Knockout自訂綁定建立方法_javascript技巧

WBOY
發布: 2016-05-16 15:23:16
原創
1638 人瀏覽過

概述

除了上一篇列出的KO內建的綁定類型(如value、text等),你也可以建立自訂綁定。

註冊你的binding handler

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
  }
}; 
登入後複製

接下來你就可以在任意dom元素上使用的自訂綁定了:

<div data-bind="yourBindingName: someValue"> </div> 
登入後複製

註:你不必在你的handler裡把init和update的callback都提供,可以提供任一個。

update callback

顧名思義,當你的監控屬性observable更新的時候,ko會自動呼叫你的update回呼。

它有以下參數:

    element:使用這個綁定的dom元素;

    valueAccessor  : 透過呼叫valueAccessor()可以取得目前綁定的model屬性值,呼叫ko.unwrap(valueAccessor())能夠更方便的取得observable的值和普通值;

    allBindings : 綁定到這個dom元素上的model的所有屬性值,例如呼叫callBindings.get('name') 傳回綁定的name屬性值(不存在回傳undefined),或是呼叫allBindings.has(' name')判斷name是否綁定到了目前的dom中;

    viewModel  : 在Knockout.3x中以棄用,可用bindingContext.$data或bindingContext.$rawData來取得目前的viewModel;

   bindingContext  : 綁定上下文,可呼叫bindingContext.$data、 bindingContext.$parent, bindingContext.$parents等取得資料;

接下來看一個例子,你也許希望使用visible綁定來控制元素的可見性,並且加上動畫效果,這時你可以創建你的自訂綁定:

ko.bindingHandlers.slideVisible = {
  update: function(element, valueAccessor, allBindings) {
    // First get the latest data that we're bound to
    var value = valueAccessor();
    // Next, whether or not the supplied model property is observable, get its current value
    var valueUnwrapped = ko.unwrap(value);
    // Grab some more data from another binding property
    var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified
    // Now manipulate the DOM element
    if (valueUnwrapped == true)
      $(element).slideDown(duration); // Make the element visible
    else
      $(element).slideUp(duration);  // Make the element invisible
  }
}; 
登入後複製

然後你可以這樣使用這個自訂綁定:

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>
<script type="text/javascript">
  var viewModel = {
    giftWrap: ko.observable(true)
  };
  ko.applyBindings(viewModel);
</script> 
登入後複製

init callback

ko將為每個使用綁定的dom元素呼叫你的init函數,它有兩個主要用途:

(1)為dom元素設定初始化狀態;

(2)註冊一些事件處理程序,例如:當使用者點擊或修改dom元素時,你可以改變監控屬性的狀態;

ko將使用和update回呼完全相同一組參數。

繼續前面的例子,你也許想讓slideVisible在頁面第一次顯示的時候就設定該元素的可見性狀態(沒有任何動畫效果),而動畫效果是在以後改變的時候執行,你可以按照下面的方式來做:

ko.bindingHandlers.slideVisible = {
  init: function(element, valueAccessor) {
    var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to
    $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
  },
  update: function(element, valueAccessor, allBindings) {
    // Leave as before
  }
}; 
登入後複製

giftWrap被初始化定義為false(ko.observable(false)),關聯的DIV會在初始化的時候隱藏,之後使用者點選checkbox時才讓DIV顯示。

你現在已經知道如何使用update回呼了,當observable值改變的時候你可以更新dom元素。我們現在可以用另外的方法來做,例如當使用者有某個action操作時,也能引起你的observable值更新,例如:

ko.bindingHandlers.hasFocus = {
  init: function(element, valueAccessor) {
    $(element).focus(function() {
      var value = valueAccessor();
      value(true);
    });
    $(element).blur(function() {
      var value = valueAccessor();
      value(false);
    });
  },
  update: function(element, valueAccessor) {
    var value = valueAccessor();
    if (ko.unwrap(value))
      element.focus();
    else
      element.blur();
  }
}; 
登入後複製

現在你可以透過元素的「focusedness」綁定來讀寫你的observable值了。

<p>Name: <input data-bind="hasFocus: editingName" /></p>
<!-- Showing that we can both read and write the focus state -->
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>
<script type="text/javascript">
  var viewModel = {
    editingName: ko.observable()
  };
  ko.applyBindings(viewModel);
</script>
登入後複製

以上內容是小編給大家分享的Knockout自訂綁定建立方法,希望大家喜歡。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板