3.Knockout.Js（属性绑定）
前言
让visible绑定到DOM元素上，使得该元素的hidden或visible取决于绑定的值。
简单的绑定
首先还是先定义一个ViewModel
var AppViewModel = {
shouldShowMessage: ko.observable(true) ///初始化的时候div是visible的
};
AppViewModel.shouldShowMessage = ko.observable(false); ///现在hidden勒
ko.applyBindings( AppViewModel);
并且通过ko.applyBindins进行激活Knockout。
然后定义一个UI界面元素
<div data-bind="visible:shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
运行之后此div在初始化的时候还是显示的可以，之后就被重新赋值为false,导致此div被隐藏掉了。
参数：
当参数设置为一个假值时（例如：布尔值false， 数字值0， 或者null， 或者undefined） ,该绑定将设置该元素的style.display值为none，让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。
当参数设置为一个真值时（例如：布尔值true，或者非空non-null的对象或者数组） ,该绑定会删除该元素的style.display值，让元素可见。然后你在CSS里自定义的display样式将会自动生效。
如果参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，如果不是，那元素的visible状态将只设置一次并且以后不在更新。
使用函数或者表达式来控制元素的可见性
你也可以使用JavaScript函数或者表达式作为参数。这样的话，函数或者表达式的结果将决定是否显示/隐藏这个元素。例如：
<script type="text/javascript">
var AppViewModel = {
shouldShowMessage: ko.observable(true), ///初始化的时候div是visible的
myValues: ko.observableArray([])
};
AppViewModel.shouldShowMessage = ko.observable(false); ///现在hidden勒
AppViewModel.myValues.push("some value"); ///向myValues数组中 添加一个项
ko.applyBindings( AppViewModel);
</script>
在ViewModel中添加了一个myValues的属性值
同时给myValues的数组添加了一个项
并且在页面UI中绑定了一个元素
<div data-bind="visible: myValues().length > 0">
You will see this message only when 'myValues' has at least one member.
</div>
就这样当添加完"some value"元素之后，myValues().length>0 则结果为true
那么此div就会显示出来。
前言
text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示<span>或者<em>上非常有用，但是你可以用在任何元素上。
简单绑定
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable()
};
viewModel.myMessage("Hello, world!");
ko.applyBindings(viewModel);
</script>
KO将参数值会设置在元素的innerText （IE）或textContent（Firefox和其它相似浏览器）属性上。原来的文本将会被覆盖。
如果参数是监控属性observable的，那元素的text文本将根据参数值的变化而更新，如果不是，那元素的text文本将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。
使用函数或者表达式来决定text值
继续在上面的ViewModel中添加一个属性，并且添加一个依赖监控属性
price: ko.observable(24.95)
viewModel.priceRating = ko.dependentObservable(
function () {
return this.price() > 50 ? "expensive" : "affordable";
}, viewModel);
添加一个UI页面元素进行绑定
The item is <span data-bind="text: priceRating"></span> today.
现在，text文本将在“expensive”和“affordable”之间替换，取决于价格怎么改变。
关于HTML encoding
因为该绑定是设置元素的innerText或textContent （而不是innerHTML），所以它是安全的，没有HTML或者脚本注入的风险。例如：如果你编写如下代码：
viewModel.myMessage("<i>Hello, world!</i>");
它不会显示斜体字，而是原样输出标签。如果你需要显示HTML内容，请参考html绑定.
关于IE 6的白空格whitespace
IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span。如果你想编写如下的代码的话，那Knockout将不起任何作用：
Html绑定
html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。
简单示例
<div data-bind="html: details"></div>
<script type="text/javascript">
var viewModel = {
details: ko.observable()
};
ko.applyBindings(viewModel);
viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
</script>
这样Html 的EM标签就会显示于此
KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。
如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。
关于HTML encoding
因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显 示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。
Css绑定
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）
简单示例
<p style="background: gray; color: #ffffff; font-size: 18pt;">Html绑定</p>
<script type="text/javascript">
var viewModel = {
details: ko.observable(),
currentProfit: ko.observable(150000)
};
ko.applyBindings(viewModel);
viewModel.currentProfit(-50);
viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
</script>
运行后的效果为
记得还写了一个css样式
.profitWarning {
color: red;
}
该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。
你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
如果参数是监控属性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>
Style绑定
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）
Style简单示例
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
Profit Information
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
var viewModel = {
currentProfit:ko.observable(15000)
};
viewModel.currentProfit(-50);
ko.applyBindings(viewModel);
</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 }
attr绑定
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。
attr绑定简单示例
<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")
};
ko.applyBindings(viewModel);
</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>
