KnockoutJS(4)-控制文本和外观绑定

控制文本和外观绑定

依赖关系：除了Knockout核心库之外，无依赖关系。

类别	目的
Visible绑定	Visible绑定通过绑定一个值来确定DOM元素显示或隐藏
Text绑定	Text绑定主要是让DOM元素显示参数值。 通常情况下，该绑定在<span>和<em>这样的元素上非常有用，而实际上你可以绑定任何元素。
html 绑定	html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。
CSS Binding(CSS类名绑定)	css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）
Style Binding(Style属性绑定)	style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）
Attr Binding(attr属性绑定)	attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。

1. Visible绑定

参数

　　主参数

当参数设置为一个假值(例如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将会运行你的函数或者表达式，返回的结果来控制元素显示或者隐藏。

示例

<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>

View Code
注意事项

　　应用的属性名字不是合法的JavaScript变量命名