attr属性绑定

这个绑定可以用于给DOM元素添加自定义属性,或绑定到已有的属性:

目的

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核心类库外,无依赖。

控制DOM元素的任意属性,比如href等 会根据所绑定的bool值(或者可以返回bool值的js表达式),给元素 移除/添加 对应的属性 如果与observable或者computed属性绑定,则会产生双向绑定效果。