attr绑定
目的
attr绑定可以设置DOM元素的属性值。例如,当我们需要设置title的值,或者一个img的src值,或者一个超链接的href,使用属性绑定会在model的值发生改变时动态的更新绑定的属性值。
示例:
<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>
这样就会把url设置成year-end.html, 把title设置为Report including final year-end statistics
.
参数
传递的参数是一个JavaScript对象的类型,参数的名称就是属性的名称,参数的值呢,就是要设置的属性的值。
如果参数的值使用了一个observable的属性,那么这个属性将会是动态的,当observable的值发生改变时,KO会更新属性值。
注:如果属性名称不是一个合法的JavaScript变量名要怎么办
例如,要绑定属性data-something,这样写是错的:
<div data-bind="attr: { data-something: someValue }">...</div>
正确的写法,是把属性使用引号括起来:
<div data-bind="attr: { 'data-something': someValue }">...</div>
注:在老的浏览器是使用一些JavaScript关键字
在一些老的浏览器(如IE8以下的),使用javascript的关键字会报错,此时只需要使用引号把关键字括起来就行了:
<input data-bind="attr: { 'for': someValue }" />