控制文本和外观------Attr Binding(attr属性绑定)

时间：2021-03-18 08:52:31

Attr Binding(attr属性绑定)

目的

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元素添加自定义属性，或绑定到已有的属性：

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

相关文章