使用基於數據的jsrender創建一個div

Question

我使用jsrender模板引擎來呈現一個listview，但我不知道如何設置基於數據字段的''背景顏色...

的數據格式如下：

[{"abc":"foo", "color":FF02FF},{"abc":"bar", "color":550233},...] 

我的僞代碼：

<ul id="list" data-role="listview" data-theme="d" data--divider-theme="d" data-autodividers="true"> 

</ul> 

<script type="text/javascript"> 

    $(document).one("pageinit", function() { 
     getData("URL", function (data) { 
      var generatedHtml = $("#template").render(data); 
      $("#list").html(generatedHtml).listview("refresh"); 
     }); 

     $("#list").listview({ 
      autodividers: true, 
      autodividersSelector: function (li) { 
       var out = ...; 
       return out; 
      } 
     }).listview("refresh"); 
    }); 

</script> 

<script id="template" type="text/x-jsrender"> 

    <li> 
     <div class="colorDiv">MyDiv</div> 
     <h3>{{:abc}}</h3> 
    </li> 

</script> 

<style> 
    .colorDiv { 
     width:100%; 
    } 
</style> 

所以，我想設置的.colorDiv背景顏色與現場color我的數據。

我想我可以做這樣的事情：

<div class="colorDiv" style="background-color:{{:color}}"></div>

但是，這是一個語法錯誤...

我怎樣才能做到這一點？

Answer 1

它說這是一個語法錯誤？ style="rule: {{:value}};"格式應該沒有任何問題。

VS2012抱怨說它不是有效的HTML，但那只是因爲它不夠聰明才能完全解析JsRender語法。 JsRender本身沒有像這樣渲染內聯樣式的問題。

請記住，你將不得不在#前綴那些顏色十六進制值，併爲整潔關閉他們與;所以像<div class="colorDiv" style="background-color: #{{:color}};"></div>可能是最佳的。

而且，你似乎試圖數據的陣列直接綁定到一個單一<li/>，其中（假設#list提供外<ul/>）你真正想要的東西，如：

getData("URL", function (data) { 
     var generatedHtml = ""; 
     var template = $("#template"); 
     data.forEach(function (item) { 
      generatedHtml += template.render(item); 
     }); 
     $("#list").html(generatedHtml).listview("refresh"); // Haven't used listview before. Maybe you can't bulk insert like this but need to insert items one at a time, inside the loop? 
    });