Wie kann man mehrere Datenbindungsattribute für ein Element haben?


94

Ich muss mehrere Datenbindungen für ein Element haben. Zum Beispiel möchte ich sowohl eine hrefals auch eine htmlDatenbindung für ein a Tag. Ich habe es versucht,

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

Das funktioniert aber nicht. Es scheint, dass Knockout nur das Binden einer data-bind Eigenschaft unterstützt. Wie binde ich sowohl das hrefinnere htmlals auch ein benutzerdefiniertes data-propAttribut an ein Element?

Antworten:


127

So was:

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

Sie verwenden durch Kommas getrennte Bindungen. Das Attribut entspricht dem Übergeben eines Objekts:

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

Oder wenn Sie nach mehreren attrBindungen gleichzeitig fragen :

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

Können Sie mir auch sagen, dass, wenn viewModel.tasks = ko.observableArray (tsks), dann viewModel.tasks = [neues Array] ändern, wie man klopft, dass das Array geändert wird
user960567

Versuchen Sie beim Festlegen eines ko.observable-Werts Folgendes : viewModel.tasks([1,2,3]);. Dh Sie rufen es als Funktion auf und übergeben den neuen Wert als Parameter
paulslater19

2

Auf diese Weise habe ich das Quellattribut und das Klickereignis mithilfe der Datenbindung implementiert. Sie können es nützlich finden.

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

1

Ich benutze einfach:

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

für ein Kontrollkästchenelement.


1

Sie können mehrere Eigenschaften , wie unten verwenden

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

Objekt wie dieses

{ url: 'http://stackoverflow.com', id:'newid' , classvalue: 'classname' }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.