How to have multiple data-bind attributes on one element?

Question

I need to have multiple data bindings on one element. For example, I want a href as well as a html data-binding on one a tag. I have tried this,

<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 one data-bind property? How to bind both the href, the inner html, and a custom "data-prop" attribute on one element?

Answer 1

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 attr bindings at once:

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

Answer 2

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