¿Cómo tener múltiples atributos de enlace de datos en un elemento?

94

Necesito tener múltiples enlaces de datos en un elemento. Por ejemplo, quiero una hrefasí como un htmlenlace de datos en una a etiqueta. He probado esto

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

Pero esto no funciona. ¿Parece que el knockout solo admite la vinculación de una data-bind propiedad? ¿Cómo vincular el atributo href, el interno htmly el data-propatributo " " personalizado en un elemento?

javascript jquery knockout.js

— user960567
fuente

127

Me gusta esto:

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

Utiliza enlaces separados por comas; el atributo es lo mismo que pasar un objeto:

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

O, si está preguntando acerca de varios attrenlaces a la vez:

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

— paulslater19
fuente

¿Puede también decirme que, si viewModel.tasks = ko.observableArray (tsks) entonces cambiando viewModel.tasks = [new Array], cómo decirle a knock que la matriz ha cambiado

— user960567

al establecer un valor ko.observable, trata de hacerlo de esta manera: viewModel.tasks([1,2,3]);. Es decir, lo llama como una función, pasando el nuevo valor como un parámetro

— paulslater19

2

Así es como implementé el atributo de origen y el evento de clic usando data-bind. Lo podrías encontrar útil.

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

— aamir sajjad
fuente

1

Yo simplemente uso:

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

para un elemento de casilla de verificación.

— chris
fuente

1

puede usar múltiples propiedades usando , como a continuación

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

objeto como este

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

— Surendra Kumar Ahir
fuente