Як мати кілька атрибутів прив'язки даних на одному елементі?


94

Мені потрібно мати кілька прив’язок даних до одного елемента. Наприклад, я хочу href, а також htmlприв'язку даних до одного a тегу. Я спробував це,

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

Але це не працює. Здається, нокаут підтримує лише прив'язку однієї data-bind властивості? Як прив'язати як hrefвнутрішній html, так і власний data-propатрибут " " до одного елемента?

Відповіді:


127

Подобається це:

<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 = [новий масив], як визначити стук, що масив змінено
user960567

при установці ko.observable значення, спробуйте зробити це в такий спосіб : viewModel.tasks([1,2,3]);. Тобто ви називаєте це як функцію, передаючи нове значення як параметр
paulslater19

2

Ось як я реалізував вихідний атрибут та подію клацання за допомогою прив'язки даних. Вам це може виявитися корисним.

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

1

Я просто використовую:

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

для елемента прапорця.


1

Ви можете використовувати кілька властивостей, використовуючи, , як показано нижче

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

такий об’єкт

{ url: 'http://stackoverflow.com', id:'newid' , classvalue: 'classname' }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.