RIVETS.JS - 在html image 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-之后設置屬性名稱