knockoutjs 容易混淆的知识点(绑定)
knockoutjs 是声明式的语法且提供言简意赅的强大的把data link 到UI的javascript库。
一.绑定语法
使用name 和value 中间用冒号分隔,多个绑定表达式之间以逗号分隔。绑定的name必须是已经注册在knockoutjs中的或者是自己自定义的binding 名称,否则绑定不起作用,也不会报错,knockoutjs 会忽略它。绑定的值可以是个具体的值,变量或者直接量(数组,对象,字符串),和有效的javascript表达式
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"/> 6 <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"> 7 </script> 8 9 <script type="text/javascript"> 10 11 window.onload = function () { 12 var viewModel = { 13 14 shouldShowMessage: true, 15 price: function () { 16 return 20; 17 }, 18 parseAreaCode: function (data) { 19 return data; 20 }, 21 cellphoneNumber: function () { 22 return '123'; 23 }, 24 myFunction: function (a, b) { 25 alert(a); 26 }, 27 "facial-expression2": ko.observable() 28 }; 29 30 ko.applyBindings(viewModel); 31 } 32 33 </script> 34 </head> 35 36 <body> 37 <!-- variable (usually a property of the current view model --> 38 <div data-bind="visible: shouldShowMessage">Hi I can see...</div> 39 40 <!-- comparison and conditional --> 41 The item is 42 <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>. 43 <!-- function call and comparison --> 44 <button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button> 45 <!-- function expression --> 46 <div data-bind="click: function (data) { myFunction('param1', data) }">...</div> 47 48 <!-- object literal (with unquoted and quoted property names) --> 49 <div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}"> 50 51 <span data-bind="text: emotion"></span> 52 <br/> 53 <span data-bind="text: 'facial-expression'"></span> 54 <br/> 55 </div> 56 </body> 57 </html>
绑定的name 和 value之间可以有空格或没有空格,也可以有换行。
二.绑定上下文
绑定context是一个object,当applyBindings 时,knockoutjs 会自动创建和管理继承式的context.
当使用with 或者foreach时,$data会非常好用。$index 用在foreach时。还可以使用$element.id来获取标签的dom id.
三.自定义绑定
1.注册一个绑定,把自定义的绑定附加到ko.bindingHandlers上。
1 ko.bindingHandlers.yourBindingName = { 2 init: function(element, valueAccessor, allBindings, 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, allBindings, viewModel, bindingContext) { 7 // This will be called once when the binding is first applied to an element, 8 // and again whenever any observables/computeds that are accessed change 9 // Update the DOM element based on the supplied values here. 10 } 11 };
参数说明:
element:指的是绑定的标签,$(element)可以操作DOM
valueAccessor:可以使用valueAccessor()获取到该绑定对应的属性,使用ko.unwrap
获取返回值
allBindings:allBindings.get('name')检索任意name的绑定的值
viewModel:Knockout 3.x. 不建议使用,拿到当前的viewModel
bindingContext:绑定上下文
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script> <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"> </script> <script type="text/javascript"> window.onload = function () { ko.bindingHandlers.slideVisible = { init: function(element, valueAccessor) { }, 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 } }; var viewModel = { giftWrap: ko.observable(false) }; ko.applyBindings(viewModel); } </script> </head> <body> <div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div> <label> <input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label> </body> </html>