关于我们当前位置:星鸿娱乐 > 关于我们 > >

Knockout自定义绑定创建方法

  

[knockout自定义绑定,knockout绑定]Knockout自定义绑定创建方法

  

概述  
星鸿娱乐注册  

  

除了上一篇列出的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元素上使用的自定义绑定了:  
  

  
  
  
  
  

注意:你不必在你的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  }  }; 
  
  

然后你可以这样使用这个自定义绑定:  
  

  
  
  
You have selected the option
    var viewModel = {  giftWrap: ko.observable(true)  };  ko.applyBindings(viewModel);  
  
  

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值了。

  
  

  
  
  

Name:

    
You're editing the name
    var viewModel = {  editingName: ko.observable()  };  ko.applyBindings(viewModel);  
  
  

以上内容是小编给大家分享的Knockout自定义绑定创建方法,希望大家喜欢。

  

(责任编辑:admin)

上一篇:星鸿娱乐平台:JS实现霓虹灯文字效果的方法

下一篇:星鸿娱乐平台:js跨浏览器实现将字符串转化为

推荐内容

客户服务热线

400 888 8932

在线客服