测试数据:
function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.observable(age); self.isShow = ko.observable(""); self.html = "没有div", self.isRed = true } var person = new Person("tom",18); ko.applyBindings(person);
一、text 绑定
例如div、span 等标签的文本显示,text绑定是经过html编码的。
二、visible 绑定
如果变量或表达式为真,则正常显示;否则设置:display:none。
显示或不显示成年或未成年
这里有一个小小的建议,js中,为假的情况有:布尔类型的:false、数字类型的:0 、字符类型的:"", 还有 null 和 undifined。有时候看到有些人这样写:if(str != null && str != ""){...},其实可以简写为:if(str){...}
三、html 绑定
设置元素的innerHTML属性,不会对绑定内容进行html编码,所以可以引起html攻击。所以需要自己进行编码,或者改用text绑定。
四、attr绑定
attr可以设置html元素的基本属性,例如img 的 src 属性,a 的href 属性等。attr 属性是一个对象,可以设置多个绑定属性。
五、style 绑定
style绑定用于设置dom元素的样式,根据变量或表达式的真/假,设置或移除样式。如果样式比较复杂的,建议用css绑定。
style绑定
六、css 绑定
css根据变量或表达式的真假,添加class属性到dom元素。
css绑定
七、总结
可以看到,ko除了可以用于数据绑定,还可以用于样式绑定。总之就是让我们尽量减少操作dom。上面还没有提到表单域的相关绑定,会在后面说明。