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

深藏阁楼爱情的钟 2023-06-02 14:57 2阅读 0赞

### 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及以下）使用关键字作为属性会报错，你同样可以用引号括起来解决：

**依赖**  
只依赖KO核心库

转载于:https://www.cnblogs.com/DHclly/p/6755476.html