Kncok之绑定事件

第二天

 任务：绑定时间看完，弄懂。时间：8H

1.visible 绑定

目的：是的该元素的hidden或者visible的值跟随绑定的值变化而变化

eg:

<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
ko.applyBindings(viewModel);
</script>

主参数
 当参数设置为一个假值时（例如：布尔值 false， 数字值 0， 或 者 null， 或者 undefined） ,该绑定将设置该元素的 style.display 值为 none， 让元素隐藏。它的优先级高于你在 CSS 里定义的任何 display 样式。
当参数设置为一个真值时（例如：布尔值 true，或者非空 non-null 的对象或者数组） ,该绑定会删除该元素的 style.display 值，让元 素可见。然后你在 CSS 里自定义的 display 样式将会自动生效。
如果参数是监控属性 observable 的，那元素的 visible 状态将根 据参数值的变化而变化，如果不是，那元素的 visible 状态将只设置一次并且以 后不在更新。

 

2 text 绑定
目的 :
text 绑定到 DOM 元素上，使得该元素显示的文本值为你绑定的参数。该绑定在 显示<span>或者<em>上非常有用，但是你可以用在任何元素上。

eg

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()的等价内容。

 

3 html 绑定
      目的 ：
          html 绑定到 DOM 元素上，使得该元素显示的 HTML 值为你绑定的参数。如果在你 的 view model 里声明 HTML 标记并且 render 的话，那非常有用。

eg：

<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()的等价内容。

 

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

eg：

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

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

 

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 值将会只应用一次并且 以后不在更新。