Style绑定

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

Style简单示例

var viewModel = {

currentProfit:ko.observable(15000)

};

viewModel.currentProfit(-50);

ko.applyBindings(viewModel);

简单示例代码，运行后发现为红色的字体

当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。

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

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

如果参数是监控属性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绑定简单示例

Report

var viewModel = {

url: ko.observable("year-end.html"),

details: ko.observable("Report including final year-end statistics")

};

ko.applyBindings(viewModel);

运行后效果为

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

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

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

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

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

因为data-something 不是一个合法的命名。解决方案是：在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的)。例如

Knockout.Js官网学习(创建自定义绑定)

前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...

Knockout.Js官网学习(系列)

1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)

selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的元素上. 当用户在m ...

Knockout.Js官网学习(html绑定、css绑定)

Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例