Javascript 如何在一个元素上拥有多个数据绑定属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10700020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have multiple data-bind attributes on one element?
提问by user960567
I need to have multiple data bindings on one element. For example, I want a hrefas well as a htmldata-binding on oneatag. I have tried this,
我需要在一个元素上有多个数据绑定。例如，我想要一个标签上的一个href以及一个html数据绑定。我试过这个，a
<a data-bind="html: name"
data-bind="attr: { href: url }"
data-bind="attr: { 'data-prop': xyz }">
</a>
But this doesn't work. It seems knockout only supports binding onedata-bindproperty? How to bind both the href, the inner html, and a custom "data-prop" attribute on one element?
但这不起作用。似乎淘汰赛只支持绑定一个data-bind属性？如何在一个元素上同时绑定href、内部html和自定义“ data-prop”属性？
回答by paulslater19
Like this:
像这样：
<a data-bind="html: name, attr: { href: url }">
You use comma-separated bindings - the attribute is the same as passing an object:
您使用逗号分隔的绑定 - 该属性与传递对象相同：
{
html: name,
attr: { href: url }
}
Or, if you're asking about multiple attrbindings at once:
或者，如果您attr一次询问多个绑定：
<a data-bind="html: name, attr: { href: url, 'data-prop': FullName }">
回答by aamir sajjad
This is how I implemented the source attribute and click event using data-bind. You may find it useful.
这就是我使用数据绑定实现源属性和单击事件的方式。你可能会发现它很有用。
<img data-bind="{click: function(data, event) {ESVendorWidget.loadFunction(data,event)},
attr: {src: $data.Photo.PhotoUrl }}"
alt="package pic" class="big" />
回答by chris
I simply use:
我只是使用：
<input type="checkbox"
data-bind="click: callFunction(), checkedValue: 0, checked: Card.Days">
for a checkbox element.
对于复选框元素。
回答by Surendra Kumar Ahir
you can use multiple properties using ,like below
您可以使用多个属性，,如下所示
<a data-bind="attr: { href: url, id: id , class: classvalue}">
object like this
像这样的对象
{ url: 'http://stackoverflow.com', id:'newid' , classvalue: 'classname' }
