Knockout.js学习笔记----绑定

1、Visible绑定

 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏;

You will see this message only when "shouldShowMessage" holds a true value.

2、Text绑定

Text绑定主要是让DOM元素显示参数值。

通常情况下,该绑定在这样的元素上非常有用,而实际上你可以绑定任何元素。

Today's message is: 
 

3、html绑定

html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话,那非常有用。

4、CSS类名绑定

css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。(注:如果你不想应用CSS class而是想引用style属性的话,请参考style绑定。)

Profit Information

绑定多个值时:

5、Style属性绑定

style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)

Profit Information

设置多个style值:

...

注意:

注:应用的style的名字不是合法的JavaScript变量命名

如果你需要应用font-weight或者text-decoration,你不能直接使用,而是要使用style对应的JavaScript名称。

错误:{ font-weight: someValue }; 正确:{ fontWeight: someValue }

错误:{ text-decoration: someValue }; 正确:{ textDecoration: someValue }

参考:style名称和对应的JavaScript 名称列表。

6、attr属性绑定

 

这个绑定可以用于给DOM元素添加自定义属性,或绑定到已有的属性;

attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。


    Report

7、foreach绑定

使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。

(1)、循环遍历输出数组


 
 
First nameLast name

(2)、动态增加和删除遍历节点


 
 

People

8、if绑定

(1)、使用if binding可以控制某个组件动态显示,类似我们之前接触到的visible属性,不过此属性绑定过以后就不能更改,而if binding可以根据相应的条件控制组件是否显示,下面是一个简单的例子:



Here is a message. Astonishing.

此例根据checkbox是否勾选来控制是否显示下面的一个

与visible binding类似,都可以控制一段内容是否出现在页面中。

与visible不同的是,if binding是真正的控制Html标签是否出现在DOM中,如果绑定的值为false,则Html标签不会出现在页面中。

if绑定会修改DOM结构,所以出于性能考虑,不应该频繁修改if的绑定值。(这种情况应该使用visible binding)

如果与observable或者computed属性绑定,则会产生双向绑定效果。

9、with绑定

我们可以使用with binding来重新定义一个上下文绑定,比如:


Latitude: , Longitude:

这样我们在使用coords下的latitude和longitude的时候我们就不需要使用coords.latitude来调用了,因为我们使用with:coords来指定了coords的上下文,当我们使用coords下面的属性时就可以直接使用了。

10、click绑定

click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。

You've clicked times

11、event绑定

event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。

Mouse over me
Details

注1:传参数给你的click 句柄

 

最简单的办法是传一个function包装的匿名函数:

12、submit绑定

submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

13、value 绑定

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件