Question

I had a read of the documentation http://knockoutjs.com/documentation/attr-binding.html but could not understand why

 <img data-bind="attr: {src: imgname}"/>

works but

 <img data-bind="src: imgname"/>

does not…

---

What exactly does this attr binding do and what is so special about src?

Answer 1

Why should the "src: imgname" work?

There are only a couple of built-in bindings in Knockout for controlling text appearance and these are the following:

• visible
• text
• html
• css
• style
• attr

So as you see src is not in the list. All the built-ones are more or less self explenatory but when you want to bind to some other attribute without a built in support e.g. src you need to use the generic attr syntax.

As also mentioned in the documentation:

The attr binding provides a generic way to set the value of any
attribute for the associated DOM element. This is useful, for example,
when you need to set the title attribute of an element, the src of an
img tag, or the href of a link based on values in your view model