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

控制文本和外观绑定

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

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将会运行你的函数或者表达式，返回的结果来控制元素显示或者隐藏。

示例

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

View Code

2. Text绑定

参数

　　主要参数

Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。

如果参数是一个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容一次，以后不会再更新。

如果你传入的不是一个值或者一个字符串（比如：你传入一个对象或者数组）那么显示的文本将是yourParameter.toString()的结果。

　　其他参数

　　　　无

示例

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>

View Code

注意事项

注1：使用函数或表达式来决定text值

如果你想text值可编程化，一种选择是创建计算属性，然后在运算函数中编码决定text中显示什么。

注2：关于HTML编码

由于text绑定是利用元素的text节点属性来设置文本值，你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。

注3：使用“text”而没有一个容器元素

有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如，在option元素中是不允许存在其他元素的，所以下面的绑定是无法正常工作的。

注4：一个关于IE6 白空格

IE6有一个奇怪的现象，如果span有空格的话，它会变成一个空span，如果你编写以下代码，Knockout不会起任何作用。

IE6不会显示span中间的那个空格，如果你想避免这个问题，你可以在<span>中输入任意内容。

其他浏览器或者版本较新的IE浏览器不会出现这个问题。

3. html 绑定

参数

    主参数

    KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

    如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

    如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。

    其它参数

        无

示例

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

View Code

注意事项

　　关于HTML encoding

因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。

这个绑定的功能与text binding相对应，不同点为：

• 控制DOM元素的innerHtml属性

不会对内容进行Html编码，你可以定义自己的html标签注入进去.

4. CSS Binding(CSS类名绑定)

参数

　　主参数

      该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。

      你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，

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

View Code

　　非布尔值会被解析成布尔值。例如， 0和null被解析成false，21和非null对象被解析成true。

      如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是，那CSS class将会只添加或者删除一次并且以后不在更新。

      你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。

     其它参数

        无

示例

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

View Code

注意事项

　　应用的CSS class的名字不是合法的JavaScript变量命名

5. Style Binding(Style属性绑定)

参数

　　主参数

　　该参数是一个JavaScript对象，属性是你的style的名称，值是该style需要应用的值。

　　你可以一次设置多个style值。例如，如果你的view model有一个叫isServre的属性，

<div data-bind="style: { color: currentProfit() < 0 ? ‘red‘ : ‘black‘, fontWeight: isSevere() ? ‘bold‘ : ‘‘ }">...</div>

View Code

　　如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的style值。如果不是，那style值将会只应用一次并且以后不在更新。

　　你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除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>

View Code

注意事项

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

6. Attr Binding(attr属性绑定)

参数

　　主参数

    该参数是一个JavaScript对象，属性是你的attribute名称，值是该attribute需要应用的值。

    如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是，那attribute值将会只应用一次并且以后不在更新。

    其它参数

        无

示例

<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变量命名