如何在一个元素上拥有多个数据绑定属性？答案

【问题标题】：How to have multiple data-bind attributes on one element?如何在一个元素上拥有多个数据绑定属性？
【发布时间】：2012-05-28 19:48:30
【问题描述】：

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

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

但这不起作用。似乎淘汰赛只支持绑定 one data-bind 属性？如何在一个元素上同时绑定href、内部html 和自定义“data-prop”属性？

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

像这样：

<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 }">

【讨论】：

你能不能告诉我，如果 viewModel.tasks = ko.observableArray(tsks) 然后改变 viewModel.tasks = [new Array]，如何告诉敲那个数组改变了
当设置一个 ko.observable 值时，尝试这样做：viewModel.tasks([1,2,3]);。 IE。您将其作为函数调用，将新值作为参数传递

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我只是使用：

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

用于复选框元素。

【讨论】：

【解决方案4】：

您可以使用, 使用多个属性，如下所示

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

这样的对象

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

【讨论】：

【解决方案5】：

你可以像下面这样使用

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。另外，您应该在这里检查如何正确格式化您的帖子stackoverflow.com/editing-help#code