Knockout v3.4.0 中文版教程-15-控制文本内容和外观-attr绑定

6. attr绑定

目的

attr绑定可以给关联DOM元素的任何属性赋值。这个绑定很棒，比如，当你想要设置通过视图模型给元素的title属性、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对象，其属性名对应元素标签的属性名，其属性值对应你想要设置的属性值。

  如果你的参数是一个监控对象，值则会自动更新，否则，只会更新一次。

• 额外参数
  
  无

注意：当属性名不是合法的javascript变量名

如果你想设置属性data-something,你不能这样写：

div data-bind="attr: { data-something: someValue }">...</div>

因为data-something不符合变量命名规则。解决办法很简单，用引号括起来，因为一个字符串字面量是合法的javascript对象属性。例子：

div data-bind="attr: { 'data-something': someValue }">...</div>

注意：在旧版浏览器里面使用关键字作为属性名

在低版本浏览器（ie8及以下）使用关键字作为属性会报错，你同样可以用引号括起来解决：

<input data-bind="attr: { 'for': someValue }" />

依赖

只依赖KO核心库