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}

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

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}

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

• javascript
• html
• jquery-mobile
• rivets.js

• What's the actual location of the image? This looks like a rivets.js usage error than Worklight. – Idan Adar Commented Jan 2, 2014 at 13:09
• Yes, I think the same. The image stands on worklight server BUT the problem in this case is that I don't know how to get the value of myimage for use it in image src. – Cisco Commented Jan 2, 2014 at 13:31
• What do you mean by using the Worklight Server? Where do you store it? Please note that Worklight Server is not a file server; don't use it for this purpose. – Idan Adar Commented Jan 2, 2014 at 13:46
• I've created a cache and I use a servlet to create the image stored in the cache as byte[] (the byte array is retrieved from another server), it works correctly. My problem is not "file retrieving", my current problem is how to write mypage.myimage inside <image src"?"... in order to retrieve the runtime value of the myimage attribute (the path of the image). CUrrently mypage.myimage contains "/contextroot/images/image.jpg" BUT with my wrong syntax the src contains /%7Bmypage.myimage%7D – Cisco Commented Jan 2, 2014 at 13:52
• For Example if I try to write: <p>{mypage.myimage}</p> it is correctly translated in <p>/contextroot/images/image.jpg</p> BUT if I write <img src="{mypage.myimage}" /> it is transformed in <img src="/%7Bmypage.myimage%7D" /> It is not translated, the variable is not resolved! – Cisco Commented Jan 2, 2014 at 13:59

1 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-