如何在一个元素上具有多个数据绑定属性

How to have multiple data-bind attributes on one element?

本文关键字:属性 数据绑定 元素 一个      更新时间:2023-09-26

我需要在一个元素上有多个数据绑定。例如,我想要一个href以及一个a标签上的html数据绑定。我试过这个,

<a data-bind="html: name" 
   data-bind="attr: { href: url }" 
   data-bind="attr: { 'data-prop': xyz }">
</a>

但这行不通。似乎 KNOCKOUT 只支持绑定一个data-bind属性?如何将href、内部html和自定义的"data-prop"属性绑定在一个元素上?

像这样:

<a data-bind="html: name, attr: { href: url }">

使用逗号分隔的绑定 - 该属性与传递对象相同:

{
    html: name, 
    attr: { href: url }
}

或者,如果您同时询问多个attr绑定:

<a data-bind="html: name, attr: { href: url, 'data-prop': FullName }">

这就是我使用数据绑定实现源属性和单击事件的方式。您可能会发现它很有用。

<img data-bind="{click: function(data, event) {ESVendorWidget.loadFunction(data,event)},
                 attr: {src: $data.Photo.PhotoUrl }}"
     alt="package pic" class="big" />

我只是使用:

<input type="checkbox"
    data-bind="click: callFunction(), checkedValue: 0, checked: Card.Days">

复选框元素。

您可以使用

如下所示,使用多个属性

<a data-bind="attr: { href: url, id: id , class: classvalue}">

像这样的对象

{ url: 'http://stackoverflow.com', id:'newid' , classvalue: 'classname' }
你可以

像下面这样使用

data-bind="text: method.method_title, attr: {'id': 'label_method_' +method.method_code}">