3

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!

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
Cisco
  • 532
  • 1
  • 8
  • 24
  • What's the actual location of the image? This looks like a rivets.js usage error than Worklight. – Idan Adar Jan 02 '14 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 Jan 02 '14 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 Jan 02 '14 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 – Cisco Jan 02 '14 at 13:52
  • For 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 It is not translated, the variable is not resolved!     – Cisco Jan 02 '14 at 13:59
  • Maybe it should not be in quotation marks. No idea, never used rivets.js – Idan Adar Jan 02 '14 at 14:03
  • No, I've tried without quotation marks and the result is the same. Thank you anyway – Cisco Jan 02 '14 at 14:07
  • Temporarily I have resolved using jquery in my javascript page controller: page.find("#myimage_id").attr('src', model["mypage"].myimage); – Cisco Jan 03 '14 at 09:10

1 Answers1

10

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-

Elliot Williams
  • 563
  • 5
  • 11