knockout文本和样式绑定

Visible Binding(可见性绑定)

• ko内置的基础绑定之一 。
• 用于控制DOM元素的可见性，直接影响元素的display样式属性。
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Javascript Expression Binding(js表达式绑定)

表达式绑定是一个ko里常用的绑定方法：

• 目前为止我们演示的Binding值都是一个observable或者computed
• ko也支持直接在绑定的时候指定一个表达式来代表一个值,比如A<2(代表一个bool值),B==3?3:4(代表3或4)

实例讲解：Visible Binding结合js表达式绑定

基本语法

1、使用Visible Binding

Html代码

<div data-bind="visible: shouldShowMessage">
    当"shouldShowMessage" 变量的值为true的时候.你能看到这段内容，
</div>

Js代码

 var viewModel = {
        shouldShowMessage: ko.observable(true) // 初始化为true
    };
    viewModel.shouldShowMessage(false); // observable修改为false,Div变不可见
    viewModel.shouldShowMessage(true); // 为true则Div可见

2、使用js表达式代替observable实现绑定

Html代码

<div data-bind="visible: myValues().length > 0">
   当 'myValues' 里的元素个数大于0时，div可见
</div>

js代码

 var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible

Text Binding(文本绑定)

• ko内置的基础绑定之一 。
• 用于控制DOM元素的innerText属性。
• 会自动对text内容进行Html编码。(也就是说你绑定的是什么值，展示出来就是什么值，比如"<div></div>"不会展示为一个div，而是字符"<div></div>")
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Html Binding(Html绑定)

这个绑定的功能与text binding相对应，不同点为：

• 控制DOM元素的innerHtml属性
• 不会对内容进行Html编码，你可以定义自己的html标签注入进去

实例讲解：Text Binding

Text Binding在本系列之前的Demo中已经使用过，语法十分简单：

基本语法

1、使用Text Binding

Html代码

Today's message is: <span data-bind="text: myMessage"></span>

Js代码

var viewModel = {
        myMessage: ko.observable() 
    };
    viewModel.myMessage("Hello, world!"); // 这是要显示的文本内容

CSS Binding(CSS类名绑定)

• ko内置的基础绑定之一 。
• 用于控制DOM元素的class属性(因此个人认为叫做class binding更直接一些)。
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的class名称
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Style Binding(Style属性绑定)

同样是用于控制样式，不过该绑定用于控制样式的细节：

• 控制DOM元素的Style属性，比如color,width等
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的Style属性
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Attr Binding(attr属性绑定)

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

• 控制DOM元素的任意属性，比如href等
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的属性
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

实例讲解：CSS Binding

基本语法

Html代码

<div data-bind="css: { myClass: enableMyClass }">
  some text
</div>

Js代码

var viewModel = {
        enableMyClass: ko.observable(false) //默认为false
    };
    viewModel.enableMyClass(true);//设为true,则div的class有效