[KnockoutJS Documentation]-绑定(bindings)-文本和外观控制

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>

当参数值为假时(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

text绑定用于DOM元素显示文本,通过设置元素的innerTexttextContent
通常用于<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">&nbsp;</span> to our web site.<!--show as you wish-->

html

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

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值。如0null会被当成false21或非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

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-weighttext-decoration等),必须使用style的js名称(如{ fontWeight: someValue }{ textDecoration: someValue }等)。
详见JavaScript Style Attributes。

attr

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

你可能感兴趣的:([KnockoutJS Documentation]-绑定(bindings)-文本和外观控制)