Knockout应用开发指南 第三章：绑定语法（1）

第三章全部代码都须要启用KO的ko.applyBindings(viewModel);功能，才能使代码生效，为了节约篇幅，全部例子均省略了此行代码。

1   visible 绑定

目的

visible绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。

 

例子

<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， 数字值0， 或者null， 或者undefined） ,该绑定将设置该元素的style.display值为none，让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。

        当参数设置为一个真值时（例如：布尔值true，或者非空non-null的对象或者数组） ,该绑定会删除该元素的style.display值，让元素可见。而后你在CSS里自定义的display样式将会自动生效。

        若是参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，若是不是，那元素的visible状态将只设置一次而且之后不在更新。

     其它参数

        无

 

注：使用函数或者表达式来控制元素的可见性

你也可使用JavaScript函数或者表达式做为参数。这样的话，函数或者表达式的结果将决定是否显示/隐藏这个元素。例如：

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

 

依赖性

除KO核心类库外，无依赖。

 

2   text 绑定

目的

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>

 

参数

    主参数

    KO将参数值会设置在元素的innerText （IE）或textContent（Firefox和其它类似浏览器）属性上。原来的文本将会被覆盖。

    若是参数是监控属性observable的，那元素的text文本将根据参数值的变化而更新，若是不是，那元素的text文本将只设置一次而且之后不在更新。

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

    其它参数

        无

 

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

若是你想让你的text更可控，那选择是建立一个依赖监控属性（dependent observable），而后在它的执行函数里编码，决定应该显示什么样的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.dependentObservable(function () {
        returnthis.price() >50?"expensive" : "affordable";
    }, viewModel);
</script>

如今，text文本将在“expensive”和“affordable”之间替换，取决于价格怎么改变。

然而，若是有相似需求的话其实没有必要再声明一个依赖监控属性（dependent observable）， 你只须要按照以下代码写JavaScript表达式就能够了：

The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.

结果是同样的，但咱们不须要再声明依赖监控属性（dependent observable）。

 

注2：关于HTML encoding

由于该绑定是设置元素的innerText或textContent （而不是innerHTML），因此它是安全的，没有HTML或者脚本注入的风险。例如：若是你编写以下代码：

viewModel.myMessage("<i>Hello, world!</i>");

… 它不会显示斜体字，而是原样输出标签。若是你须要显示HTML内容，请参考html绑定.

 

注3：关于IE 6的白空格whitespace

IE6有个奇怪的问题，若是 span里有空格的话，它将自动变成一个空的span。若是你想编写以下的代码的话，那Knockout将不起任何做用：

Welcome, <span data-bind="text: userName"></span> to our web site.

… IE6 将不会显示span中间的那个空格，你能够经过下面这样的代码避免这个问题：

Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.

IE6之后版本和其它浏览器都没有这个问题

 

依赖性

除KO核心类库外，无依赖。

 

3   html 绑定

目的

html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。若是在你的view model里声明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属性上，元素以前的内容将被覆盖。

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

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

    其它参数

        无

 

注：关于HTML encoding

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

 

依赖性

除KO核心类库外，无依赖。

 

4   css 绑定

目的

css绑定是添加或删除一个或多个CSS class到DOM元素上。 很是有用，好比当数字变成负数时高亮显示。（注：若是你不想应用CSS class而是想引用style属性的话，请参考style绑定。）

 

例子

<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 CSS class到元素上，若是大于0则删除这个CSS class。

 

参数

    主参数

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

    你能够一次设置多个CSS class。例如，若是你的view model有一个叫isServre的属性，

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

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

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

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

    其它参数

        无

 

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

若是你想使用my-class class，你不能写成这样：

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

… 由于my-class不是一个合法的命名。解决方案是：在my-class两边加引号做为一个字符串使用。这是一个合法的JavaScript 对象 文字（从JSON技术规格说明来讲，你任什么时候候都应该这样使用，虽然不是必须的）。例如,

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

 

依赖性

除KO核心类库外，无依赖。

 

5   style 绑定

目的

style绑定是添加或删除一个或多个DOM元素上的style值。好比当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：若是你不是应用style值而是应用CSS class的话，请参考CSS绑定。）

 

例子

<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的时候div的style.color是红色，大于的话是黑色。

 

参数

    主参数

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

    你能够一次设置多个style值。例如，若是你的view model有一个叫isServre的属性，

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

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

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

    其它参数

        无

 

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

若是你须要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应的JavaScript名称。

    错误： { font-weight: someValue };            正确： { fontWeight: someValue }

    错误： { text-decoration: someValue };      正确： { textDecoration: someValue }

参考：style名称和对应的JavaScript 名称列表。

 

依赖性

除KO核心类库外，无依赖。

 

6   attr 绑定

目的

attr 绑定提供了一种方式能够设置DOM元素的任何属性值。你能够设置img的src属性，链接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。

 

例子

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

呈现结果是该链接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。

 

参数

    主参数

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

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

    其它参数

        无

 

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

若是你要用的属性名称是data-something的话，你不能这样写：

<div data-bind="attr: { data-something: someValue }">...</div>

… 由于data-something 不是一个合法的命名。解决方案是：在data-something两边加引号做为一个字符串使用。这是一个合法的JavaScript 对象 文字（从JSON技术规格说明来讲，你任什么时候候都应该这样使用，虽然不是必须的）。例如,

<div data-bind="attr: { ‘data-something’: someValue }">...</div>

 

依赖性

除KO核心类库外，无依赖。