Search code examples
javascriptjqueryknockout.js

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

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?

Solution

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