RIVETS.JS - What's the correct syntax in order to resolve a placeholder in html image src?

Question

I've created the following page:

<div id="mypage" data-role="page" data-theme="w">
<div id="header" data-role="header" class="ui-noboxshadow ui-header-fixed" data-position="fixed">

</div>
<div data-role="content">       
    <p class="detail-row" style="margin-top: 1em;"><span class="detail-value">{mypage.currentDate}</span></p>
    <p class="detail-row" style="margin-top: 1em;"><span class="detail-value"><img id="myimage_id" src="{mypage.myimage}" /></span></p>
    <p class="detail-row" style="margin-top: 1em;"><span class="detail-value">{mypage.mytitle}</span></p>
    <p class="detail-row"><span class="detail-value">{mypage.mydescription}</span></p>
</div>
<div id="footer" data-role="footer" data-position="fixed" data-theme="g" class="ui-noboxshadow" data-tap-toggle="false">
</div>

It works well (mypage.currentDate,mypage.mytitle, mypage.mydescription placeholders are resolved correctly) except for mypage.image placeholder: it is not resolved (I obtain this url: /%7Bmypage.myimage%7D)

Debugging javascript I saw that mypage.myimage contains the correct value in the model so what's the current syntax in order to resolved my path in img src attribute?

EXAMPLE:

If I try to write:

{mypage.myimage}

it is correctly translated in

/contextroot/images/image.jpg

BUT

if I write it is transformed in <img src="/%7Bmypage.myimage%7D" />

It is not translated, the variable is not resolved!

Answer 1

You need to write a binder for the src attribute:

rivets.binders.src = function(el, value) {
  el.src = value;
};

Then to use it you write:

<img rv-src="mypage.myimage" />

UDPATE: Looking at the docs I don't think you even need to define the binder. It should default to setting the attribute name after rv-