Knockout开发中文API系列4

目的

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>

目的

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 </option>
</select>

和 注释标记作为起始和结束符，定义一个“虚拟元素”，里面包含了标记，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绑定会让关联的DOM元素显示你参数指定的HTML内容。

通常当你的ViewModel中值是HTML标记字符串时，使用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 属性，任何之前的内容将会被重写掉。

如果参数是一个监控属性值，当这个监控属性值发生变化的时候html绑定会更新绑定元素的内容。如果这个参数是非监控属性值，那么html仅绑定元素内容一次并且以后不再去更新它。

如果你传入的参数内容不是字符串或者数字（例如对象或者数组），那么innerHTML 将会等价于yourParameter.toString()。

其他参数

无。

注意：关于HTML编码

由于HTML绑定使用的是innerHTML来设置元素内容，那么你需要注意不要使用不安全的HTML内容，因为这有可能引入脚本注入攻击的风险，如果你不确定它是否安全（比如显示用户输入的内容），请使用text绑定，因为text绑定只设置元素的text内容innerText。

==================================================

目的

Css绑定主要是给DOM元素对象添加或移除一个或多个css class类名。这非常有用，比如当值变成负数的时候用红色高亮显示。

注意：如果你不想应用CSS class，而是采用style属性的话，请采用style绑定。

静态classes示例

<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 样式，当值大于0时移除样式。

动态classes示例

<div data-bind="css: profitStatus">
Profit Information
</div>
<script type="text/javascript">
var viewModel = {
currentProfit: ko.observable(150000)
};
// Evalutes to a positive value, so initially we apply the "profitPositive" class
viewModel.profitStatus = ko.computed(function() {
return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
}, viewModel);
// Causes the "profitPositive" class to be removed and "profitWarning" class to be added
viewModel.currentProfit(-50);
</script>

当currentProfit 值是positive的时候将会给元素绑定上profitWarning 样式，其他情况下将会绑定profitWarning 样式。

参数

主要参数

如果你使用静态的CSS class名称，你可以传递一个属性名是CSS class名，值是true或者false的JavaScript对象来决定DOM元素是否应用class。

你可以一次使用多个CSS class。比如，你的view model含有一个属性isSevere

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

你可以在同一个条件下设置多个CSS class，名称用引号引起来。比如：

<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">

非bool值会被解析成bool值，比如：0或null会解析成false，像21、 non-null这样的对象会解析成true。

如果你的参数是observable 值，此绑定会在observable 值发生变化的之后添加或移除Css class。如果参数不是observable 值，那么CSS class只会添加或移除一次，以后不再变化。

如果你想使用动态Css class名称，你可以传递一个与Css class名称对应的字符串给你要添加的元素。如果参数是observable 值，绑定会移除元素之前添加的所有css class，并将对应的observable 新值添加给元素。
通常，你可以使用任意JavaScript表达式或者函数作为参数值。KO会自动执行它们通过返回的值来确定元素待添加或移除的Css class。

附加参数

无

注意：应用的Css class名称不能是不合法的JavaScript命名

如果你要添加的Css class名my-class，你不能这样写

<div data-bind="css: { my-class: someValue }">...</div>

因为my-class不是一个合法的JavaScript命名，解决方案是：在名称两边加上引号作为字符串使用，这样的命名是合法的JavaScript对象。例如：

<div data-bind="css: { 'my-class': someValue }">...</div>