RIVETS.JS - 在html图像src中解析占位符的正确语法是什么？

Question

我创建了以下页面:

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

它运行良好(mypage.currentDate,mypage.mytitle,mypage.mydescription占位符已正确解析),除了mypage.image占位符:它未解析(我获取此url:/% 7Bmypage.myimage%7D)

调试javascript我看到mypage.myimage在模型中包含正确的值,那么为了解决img src属性中的路径,当前的语法是什么？

例:

如果我试着写:

{} mypage.myimage

它被正确翻译成

/contextroot/images/image.jpg

但

如果我写它是转换进来的 <img src="/%7Bmypage.myimage%7D" />

它没有翻译,变量没有解决!

Answer 1

您需要为src属性编写一个binder:

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

然后使用它你写:

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

UDPATE:看看文档,我认为你甚至不需要定义绑定器.它应该默认在rv-之后设置属性名称