在写这篇文章之前,xxx经已写过了几篇关于改绑定函数主题的文章,想要了解的朋友可以去翻一下之前的文章
在应用Knockoutjs时我们其实不仅仅限于应用建内的绑定,比如:click、value等,我们可以创立自己的绑定则规。Knockoutjs为我们供提了非常活灵的持支,够能让我们自己去理处非常复杂的业务并且构造出可重用性的绑定。例如我们可以创立交互式的组件,比如表格、网格等。面下我们就来看看怎么一步步创立自义定绑定。
一、品级我们的绑定(Registering your binding)
我们可以通过ko.bindingHandlers
来停止绑定。
1 ko.bindingHandlers.yourBindingName = { 2 init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 3 // This will be called when the binding is first applied to an element 4 // Set up any initial state, event handlers, etc. here 5 }, 6 update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 7 // This will be called once when the binding is first applied to an element, 8 // and again whenever the associated observable changes value. 9 // Update the DOM element based on the supplied values here. 10 } 11 };
1 <div data-bind="yourBindingName: someValue"> </div>
面下我们就绍介一下这两个函数。
(1)、update
当你所绑定的组件的值变改时,会主动用调update回调函数,并且传递一下的数参:
(a)、element
:被绑定的DOM element
(b)、valueAccessor
:这是一个JavaScript函数,在这个函数中你可以到得你所绑定的以后素元的属性的值。
(c)、allBindingsAccessor
:通过此JavaScript函数,我们可以到得绑定到此DOM element上的有所属性的值。
(d)、viewModel
:将试图模型对象传递给ko.applyBindings。如果在一个嵌套的素元中应用的话,此数参代表的是以后的数据项,比如:在with:person中,此数参代表person。
(e)、bindingContext
:一个包括对这个素元可用的上下文的对象,这个对象中包括了一些特别的属性,比如:$parent、$parents、$root等。
我们之前曾应用visible来控制一个绑定是不是表现,此时我们可以通过自义定绑定实现态动的果效,比如现出和消失机都采取滑动的果效,我们则可以这样义定自己的方法:
1 ko.bindingHandlers.slideVisible = { 2 update: function(element, valueAccessor, allBindingsAccessor) { 3 // First get the latest data that we're bound to 4 var value = valueAccessor(), allBindings = allBindingsAccessor(); 5 6 // Next, whether or not the supplied model property is observable, get its current value 7 var valueUnwrapped = ko.utils.unwrapObservable(value); 8 9 // Grab some more data from another binding property 10 var duration = allBindings.slideDuration || 400; // 400ms is default duration unless otherwise specified 11 12 // Now manipulate the DOM element 13 if (valueUnwrapped == true) 14 $(element).slideDown(duration); // Make the element visible 15 else 16 $(element).slideUp(duration); // Make the element invisible 17 } 18 };
在现我们以可就应用自己的绑定能功了:
1 <div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div> 2 <label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label> 3 4 <script type="text/javascript"> 5 var viewModel = { 6 giftWrap: ko.observable(true) 7 }; 8 ko.applyBindings(viewModel); 9 </script>
通过init函数我们可以在实例DOM素元的时候去做一些事件,我们经常在以下两种情况应用init函数:
(a)、为DOM elements设置初始状态。
(b)、注册事件理处程序,这样当用户点击绑定的DOM elements时就会动触对应的事件,我们也可以对其作出反应。
我们可认为上例加增一个init函数,当面页首次载加时我们可以控制是不是表现组件:
1 ko.bindingHandlers.slideVisible = { 2 init: function(element, valueAccessor) { 3 var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to 4 $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false 5 }, 6 update: function(element, valueAccessor, allBindingsAccessor) { 7 // Leave as before 8 } 9 };
后面我们经已绍介了如何应用update,这样当一个DOM素元更新时我们可以作出对应的更新,但是我们怎么义定到某个体具的值呢,此时我们以可就应用如下的方法:
1 ko.bindingHandlers.hasFocus = { 2 init: function(element, valueAccessor) { 3 $(element).focus(function() { 4 var value = valueAccessor(); 5 value(true); 6 }); 7 $(element).blur(function() { 8 var value = valueAccessor(); 9 value(false); 10 }); 11 }, 12 update: function(element, valueAccessor) { 13 var value = valueAccessor(); 14 if (ko.utils.unwrapObservable(value)) 15 element.focus(); 16 else 17 element.blur(); 18 } 19 };
1 <p>Name: <input data-bind="hasFocus: editingName" /></p> 2 3 <!-- Showing that we can both read and write the focus state --> 4 <div data-bind="visible: editingName">You're editing the name</div> 5 <button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button> 6 7 <script type="text/javascript"> 8 var viewModel = { 9 editingName: ko.observable() 10 }; 11 ko.applyBindings(viewModel); 12 </script>
文章结束给大家分享下程序员的一些笑话语录: 马云喜欢把自己包装成教主,张朝阳喜欢把自己包装成明星,李彦宏喜欢把自己包装成的很知性,丁磊喜欢把自己包装的有创意,李开复总摆出一副叫兽的样子。看来的。其实我想说,缺啥补啥,人之常情。