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

javascript jquery knockout.js
user960567 picture user960567 · May 22, 2012 · Viewed 65.3k times · Source

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

paulslater19 picture paulslater19 · May 22, 2012

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

Related questions

Javascript Equivalent to C# LINQ Select

Following this question here : Using the checked binding in knockout with a list of checkboxes checks all the checkboxes I've created some checkboxes using knockout that allow selection from an array. working fiddle taken from above post: http://jsfiddle.net/…

Read More
knockout data-bind on dynamically generated elements

How is it possible to make knockout data-bind work on dynamically generated elements? For example, I insert a simple html select menu inside a div and want to populate options using the knockout options binding. This is what my code …

Read More
How to create an auto-complete combobox?

Does any one know the best way to create an autocomplete combobox with Knockout JS templates? I have the following template: <script type="text/html" id="row-template"> <tr> ... <td> <select class="list" data-bind="…

Read More