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>
当参数值为假时(false-like value:bool值false、数字0、null、undefined等),该绑定会设置DOM元素的yourElement.style.display
属性为none使其隐藏。它的优先级高于CSS中的定义的隐藏样式。
当参数值为真时(true-like value:bool值true、不为null的对象或数组等),该绑定会移除DOM元素的yourElement.style.display
属性使其可见。注意此时CSS中定义的样式将会生效。
如果参数是监控属性,该绑定会随着参数值变化而更新元素,否则只会绑定一次而不再更新。
绑定的参数可以使用函数或表达式。
<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元素显示文本,通过设置元素的innerText
或textContent
。
通常用于<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>
如果绑定参数的不是字符串或数字,那么DOM元素的text相当于yourParameter.toString()
。
如果参数是监控属性,该绑定会随着参数值变化而更新元素,否则只会绑定一次而不再更新。
绑定的参数可以使用函数或表达式。
注1:与html不同,参数值中若包含html标签,显示时不会解析成html,而是原样显示。
注2:使用text但没有承载元素
如果想用ko进行text绑定但没有元素可用于绑定时,例如option元素中不能包含其他元素:
<select data-bind="foreach: items">
<option>Item <span data-bind="text: name"></span></option><!--not work-->
</select>
可以使用基于标注标签的无承载标签语法(containerless syntax),以<!--ko-->
和<!--/ko-->
为开始标签和结束标签定义一个“虚拟元素 ”(virtual element)。
<select data-bind="foreach: items">
<option>Item <!--ko text: name--><!--/ko--></option>
</select>
注3:IE6的空格问题
IE6并不会显示span标签后紧跟的空格,因此
Welcome, <span data-bind="text: userName"></span> to our web site.<!--not whitespace before 'to' in IE6-->
Welcome, <span data-bind="text: userName"> </span> to our web site.<!--show as you wish-->
html绑定用于DOM元素显示html内容。
<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>
jquery可用时,ko使用jquery的html函数,否则将参数解析成html节点并添加为绑定DOM元素的子节点。
如果参数是监控属性,该绑定会随着参数值变化而更新元素,否则只会绑定一次而不再更新。
如果绑定参数的不是字符串或数字,那么DOM元素的innerHTML
相当于yourParameter.toString()
。
css绑定用于向DOM元素添加或移除命名的CSS类。
例1:绑定静态CSS类
<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时,CSS类profitWarning
被应用;当currentProfit
大于等于0时,CSS类profitWarning
被移除。
例2:绑定动态CSS类
<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.pureComputed(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
非负时,应用CSS类profitPositive
,否则应用CSS类profitWarning
。
如果使用静态CSS类名,可以传递一个属性名为CSS类名、值为可被计算为bool值的js对象。也就是说,可以一次设置多个CSS类:
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
甚至可以通过将多个CSS类名时用引号包装用同一个条件控制:
<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">
非bool值会被宽松地解释为bool值。如0
和null
会被当成false
,21
或非null对象会被当成true
。
如果使用动态CSS类名,将CSS类名作为字符串传递给参数就行。如果绑定的时监控属性,监控属性变化时,之前添加的CSS类将被移除而重新添加。
如果参数是监控属性,该绑定会随着参数值变化而更新元素,否则只会绑定一次而不再更新。
绑定的参数可以使用函数或表达式。
当CSS类名是非法的js变量名时,例如my-class
,不能直接这样写:
<div data-bind="css: { my-class: someValue }">...</div>
应该时用引号使其成为字符串字面量(string literal),从而在js对象字面量(object literal)中时合理的。
<div data-bind="css: { 'my-class': someValue }">...</div>
style绑定用于向DOM元素添加或移除style值。
<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时,元素的style.color
属性被赋值red
,大于等于0时赋值black
。
绑定的参数可以使用属性名为style名称、值为style值的js对象。
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>
如果参数是监控属性,该绑定会随着参数值变化而更新元素,否则只会绑定一次而不再更新。
绑定的参数可以使用函数或表达式。
不能使用非js标识符的style名称(如font-weight
或text-decoration
等),必须使用style的js名称(如{ fontWeight: someValue }
或{ textDecoration: someValue }
等)。
详见JavaScript Style Attributes。
attr绑定提供更通用的方式向DOM元素添加属性。
<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>
绑定的参数可以使用属性名为属性名称、值为属性值的js对象。
如果参数是监控属性,该绑定会随着参数值变化而更新元素,否则只会绑定一次而不再更新。
属性名为关键字或非法的js变量名时,需要使用引号包裹。
Javacript Keywords。
参考资料:
KnockoutJS Documentation