使用基于数据的 jsrender 设置 div 样式

Question

我正在使用jsrender 模板引擎来呈现列表视图，但我不知道如何根据我的数据字段设置''的背景颜色...

数据格式如下：

[{"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>

所以，我想用我的数据字段color 设置.colorDiv 的背景颜色。

我想我可以这样做：

<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?
    });