knockoutJS学习笔记05：控制文本和外观绑定

测试数据：

?

1 2 3 4 5 6 7 8 9 10

function Person(name,age){     var self = this;     self.name = ko.observable(name);     self.age = ko.observable(age);     self.isShow = ko.observable("");     self.html = "<div>没有div</div>",     self.isRed = true } var person = new Person("tom",18); ko.applyBindings(person);

 一、text 绑定

　　例如div、span 等标签的文本显示，text绑定是经过html编码的。

?

1 2	<div data-bind="text:name"></div> <span data-bind="text:18"></span>

 二、visible 绑定

　　如果变量或表达式为真，则正常显示；否则设置：display:none。　　

?

1 2	<div style="color:red;" data-bind="visible:isShow">显示或不显示</div> <div style="color:red;" data-bind="visible:age() >= 18">成年或未成年</div>

 　　这里有一个小小的建议，js中，为假的情况有：布尔类型的：false、数字类型的：0 、字符类型的:""， 还有 null 和 undifined。有时候看到有些人这样写：if(str != null && str != ""){...}，其实可以简写为：if(str){...}

三、html 绑定

　　设置元素的innerHTML属性，不会对绑定内容进行html编码，所以可以引起html攻击。所以需要自己进行编码，或者改用text绑定。　　

?

1	<div data-bind="html:html"></div>

 四、attr绑定

　　attr可以设置html元素的基本属性，例如img 的 src 属性，a 的href 属性等。attr 属性是一个对象，可以设置多个绑定属性。

?

1	<a data-bind="attr:{href:'default.aspx?name='+name(),title:name},text:name"></a>

 五、style 绑定

　　style绑定用于设置dom元素的样式，根据变量或表达式的真/假，设置或移除样式。如果样式比较复杂的，建议用css绑定。

?

1	<div data-bind="style:{color:isRed ? 'red' : 'yellow' }">style绑定</div>

 六、css 绑定

　　css根据变量或表达式的真假，添加class属性到dom元素。　　

?

1	<div data-bind="css:{red: isRed}">css绑定</div>

七、总结

　　可以看到，ko除了可以用于数据绑定，还可以用于样式绑定。总之就是让我们尽量减少操作dom。上面还没有提到表单域的相关绑定，会在后面说明。