javascript - 使用基于数据的 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>可能是最佳的。

此外，您似乎试图将数据数组直接绑定(bind)到单个 <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?
    });