Knockoutjs的绑定系统为提供了非常强大且简洁的方式将数据和UI连接起来,可以非常方便的使用这个绑定语法来进行数据的展示。
绑定语法:
<span data-bind="text: myMessage"></span> |
或
<!-- ko text: myMessage --><!-- /ko --> |
【1】
一个绑定语法由两部分组成:绑定的名字和值,他们之间使用“:”进行隔开。
myMessage在viewModel中声明。
观察者变量(Observable),是实现自动更新的方式。通过将viewModel和页面元素绑定的某个变量定义为cube.obj或cube.array,则当viewModel中该变量的值改变,页面对应的元素将自动更新。
示例:
View中:
<div data-bind="text: content"></div> <button data-bind="click:setContent">修改值</button> |
ViewModel中:
define([], function() { var PageViewModel = function(params) { var self = this; self.content = cube.obj("要显示的内容");
self.setContent = function(){ self.content("修改后的内容"); } }; return PageViewModel; }); |
当动态修改self.content的值时,view中的显示文本将自动更新。比如通过View中的一个按钮修改self.content的值。
注意:观察者变量赋值时通过调用变量方法进行,比如:self.content("修改后的内容");如果使用等号赋值,该观察者变量将会中断观察,比如:self.content = "修改后的内容";或者self.content = cube.obj("修改后的内容");
获取变量值通过变量方法:比如:var contentValue = self.content();
观察者变量可以作为参数传递传递到其他ViewModel中,当该变量值在其中一个ViewModel中被修改时,那该观察者变量的值将都会被修改。
当变量定义为cube.array时,比如:self.content = cube.array([“河北”,”北京”,”天津”]);则会监控数组元素的变化,包括数组元素的新增、删除、排序。
观察者数组常用的方法如下:
(1)、self.content.push('Some new value'):增加一个新的元素。
(2)、self.content.pop():删除一个元素,并返回其值。
(3)、self.content.unshift('Some new value'):在数组的开始处增加一个新的元素。
(4)、self.content.shift():删除数组的第一个元素,并返回其值。
(5)、self.content.reverse():反转数组的顺序。
(6)、self.content.remove(someItem) 移除self.content数组内所有匹配someItem的对象, 并把这些对象组成一个数组返回。
(7)、self.content.remove(function(item) { return item.age < 18 }) 移除self.content数组内所有年龄属性小于18的对象,并返回这些对象组成的新数组。
(8)、self.content.removeAll(['Chad', 132, undefined]) 移除self.content数组内所有匹配'Chad',123, or undefined 的对象并把它们组成新数组返回。
(9)、self.content.removeAll() 移除self.content数组内所有数据,并返回这些数据组成的一个新数组。
【2】
visible绑定通过绑定一个值来确定DOM元素显示或隐藏。
示例:
View中:
<div data-bind="visible: shouldShowMessage">这里的内容根据shouldShowMessage的值决定是否显示。</div> <button data-bind="click:setShouldShowMessage">修改值</button> |
ViewModel中:
define([], function() { var PageViewModel = function(params) { var self = this; self.shouldShowMessage = cube.obj(true); self.setShouldShowMessage = function(){ if(self.shouldShowMessage()){ self.shouldShowMessage(false); }else{ self.shouldShowMessage(true); } } }; return PageViewModel; }); |
2) text绑定主要是让DOM元素显示参数值。
参看章节1.1.2.2。
3) html绑定到DOM元素上,使得该元素显示的HTML值为绑定的参数。
与text的区别为text显示为文本内容,html可以作为HTML标记进行渲染。
4) css绑定是添加或删除一个或多个CSS class到DOM元素上。
示例:
View中:
<div data-bind="css: { hide: isHide }"> 内容 </div> |
ViewModel中:
define([], function() { var PageViewModel = function(params) { var self = this; self.isHide = cube.obj(true); }; return PageViewModel; }); |
5) style绑定是添加或删除一个或多个DOM元素上的style值。
示例:
View中:
<div data-bind="style: { width: width }"> 内容 </div> |
ViewModel中:
define([], function() { var PageViewModel = function(params) { var self = this; self.width = cube.obj("100px"); }; return PageViewModel; }); |
6) attr 绑定提供了一种方式可以设置DOM元素的任何属性值。
示例:
View中:
<img data-bind="attr: { href: route}" /> |
ViewModel中:
define([], function() { var PageViewModel = function(params) { var self = this; self.route = cube.obj("#main"); }; return PageViewModel; }); |