一、Visible绑定
二、Text绑定
三、html绑定
四、CSS绑定
五、Style属性绑定
六、Attr Binding(attr属性绑定)
一、Visible绑定
目的
Visible绑定通过绑定一个值来确定DOM元素显示或隐藏
示例
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
<script type="text/javascript">
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
</script>
参数
主参数
当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时，该绑定会设置yourElement.style.display为 none，让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。
当参数设置为一个真值(例如bool型值true、不等于null、Object对象或数组)时，该绑定会去掉yourElement.style.display值，让元素显示。
注意，任何你在CSS中定义的样式会立即应用生效。
如果参数是一个observable值，visible绑定使得元素的visible状态随着参数值的变化而变化。如果参数不是observable值，visible绑定仅仅会设置元素visible状态一次，以后不会再更新。
其他参数
无
注：使用函数或表达式来控制元素显示隐藏
你可以选择使用JavaScript函数或者表达式作为参数值。这样的话，KO将会运行你的函数或者表达式，返回的结果来控制元素显示或者隐藏。
例如：
<div data-bind="visible: myValues().length > 0">
You will see this message only when 'myValues' has at least one member.
</div>
<script type="text/javascript">
var viewModel = {
myValues: ko.observableArray([]) // Initially empty, so message hidden
};
viewModel.myValues.push("some value"); // Now visible
</script>
依赖关系
除了Knockout核心库之外，无依赖关系。
二、Text绑定
目的
Text绑定主要是让DOM元素显示参数值。
通常情况下，该绑定在<span>和<em>这样的元素上非常有用，而实际上你可以绑定任何元素。
示例
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
参数
主要参数
Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。
如果参数是一个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容一次，以后不会再更新。
如果你传入的不是一个值或者一个字符串（比如：你传入一个对象或者数组）那么显示的文本将是yourParameter.toString()的结果。
其他参数
无
注意事项
注1：使用函数或表达式来决定text值
如果你想text值可编程化，一种选择是创建计算属性，然后在运算函数中编码决定text中显示什么。
例如：
The item is <span data-bind="text: priceRating"></span> today.
<script type="text/javascript">
var viewModel = {
price: ko.observable(24.95)
};
viewModel.priceRating = ko.computed(function() {
return this.price() > 50 ? "expensive" : "affordable";
}, viewModel);
</script>
现在，text值将会在“expensive”和“affordable”之间选择，而这主要取决于“price ”的变化。
然而，假如你按照示例中的方式你则不需要创建计算属性。你可以传入任意的JavaScript表达式进行text绑定。
例如：
The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.
注2：关于HTML编码
由于text绑定是利用元素的text节点属性来设置文本值，你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。例如，如果你输入以下内容：
viewModel.myMessage("<i>Hello, world!</i>");
它将不会显示一个斜体文本，而是按原样进行标签输出。
如果你想设置一个HTML内容，你可以参数HTML绑定。
注3：使用“text”而没有一个容器元素
有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如，在option元素中是不允许存在其他元素的，所以下面的绑定是无法正常工作的。
<select data-bind="foreach: items">
<option>Item <span data-bind="text: name"></span></option>
</select>
为了解决这个问题，你可以使用容器语法，它基于一个注释元素。
<select data-bind="foreach: items">
<option>Item <!--ko text: name--><!--/ko--></option>
</select>
<!--ko--> 和<!--/ko--> 注释标记作为起始和结束符，定义一个“虚拟元素”，里面包含了标记，Knockout能够识别这种虚拟元素语法和绑定作为你需要的容器元素而存在。
注4：一个关于IE6 白空格
IE6有一个奇怪的现象，如果span有空格的话，它会变成一个空span，如果你编写以下代码，Knockout不会起任何作用。
Welcome, <span data-bind="text: userName"></span> to our web site.
IE6不会显示span中间的那个空格，如果你想避免这个问题，你可以在<span>中输入任意内容。比如
Welcome, <span data-bind="text: userName"> </span> to our web site.
其他浏览器或者版本较新的IE浏览器不会出现这个问题。
三、html绑定
目的
html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。
例子
<div data-bind="html: details"></div> <script type="text/javascript"> var viewModel = { details: ko.observable() // Initially blank }; viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); // HTML content appears</script>
参数
主参数
KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。
如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。
其它参数
无
注：关于HTML encoding
因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。
依赖性
除KO核心类库外，无依赖。
这个绑定的功能与text binding相对应，不同点为：
控制DOM元素的innerHtml属性
不会对内容进行Html编码，你可以定义自己的html标签注入进去
四、CSS绑定
CSS Binding(CSS类名绑定)
--------------------------------------------------------------------------------
目的
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）
例子
<div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information</div> <script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class }; viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied</script>
效果就是当currentProfit 小于0的时候，添加profitWarning CSS class到元素上，如果大于0则删除这个CSS class。
参数
主参数
该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。
你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
非布尔值会被解析成布尔值。例如， 0和null被解析成false，21和非null对象被解析成true。
如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是，那CSS class将会只添加或者删除一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。
其它参数
无
注：应用的CSS class的名字不是合法的JavaScript变量命名
如果你想使用my-class class，你不能写成这样：
<div data-bind="css: { my-class: someValue }">...</div>
… 因为my-class不是一个合法的命名。解决方案是：在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字（从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的）。例如,
<div data-bind="css: { 'my-class': someValue }">...</div>
依赖性
除KO核心类库外，无依赖。
ko内置的基础绑定之一 。
用于控制DOM元素的class属性(因此个人认为叫做class binding更直接一些)。
会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的class名称
如果与observable或者computed属性绑定，则会产生双向绑定效果。
五、Style Binding(Style属性绑定)
目的
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）
例子
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information</div><script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially black }; viewModel.currentProfit(-50); // Causes the DIV's contents to go red</script>
当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。
参数
主参数
该参数是一个JavaScript对象，属性是你的style的名称，值是该style需要应用的值。
你可以一次设置多个style值。例如，如果你的view model有一个叫isServre的属性，
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>
如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的style值。如果不是，那style值将会只应用一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。
其它参数
无
注：应用的style的名字不是合法的JavaScript变量命名
如果你需要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应的JavaScript名称。
错误： { font-weight: someValue }; 正确： { fontWeight: someValue }
错误： { text-decoration: someValue }; 正确： { textDecoration: someValue }
参考：style名称和对应的JavaScript 名称列表。
依赖性
除KO核心类库外，无依赖。
同样是用于控制样式，不过该绑定用于控制样式的细节：
控制DOM元素的Style属性，比如color,width等
会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的Style属性
如果与observable或者computed属性绑定，则会产生双向绑定效果。
六、Attr Binding(attr属性绑定)
目的
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。
例子
<a data-bind="attr: { href: url, title: details }"> Report</a><script type="text/javascript"> var viewModel = { url: ko.observable("year-end.html"), details: ko.observable("Report including final year-end statistics") };</script>
呈现结果是该连接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。
参数
主参数
该参数是一个JavaScript对象，属性是你的attribute名称，值是该attribute需要应用的值。
如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是，那attribute值将会只应用一次并且以后不在更新。
其它参数
无
注：应用的属性名字不是合法的JavaScript变量命名
如果你要用的属性名称是data-something的话，你不能这样写：
<div data-bind="attr: { data-something: someValue }">...</div>
… 因为data-something 不是一个合法的命名。解决方案是：在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字（从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的）。例如,
<div data-bind="attr: { ‘data-something’: someValue }">...</div>
依赖性
除KO核心类库外，无依赖。
这个绑定可以用于给DOM元素添加自定义属性，或绑定到已有的属性：
控制DOM元素的任意属性，比如href等
会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的属性
如果与observable或者computed属性绑定，则会产生双向绑定效果。
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
