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>

所以，我想设置.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>之类的内容可能是最佳的。< / p>

此外，您似乎正在尝试将数据数组直接绑定到单个<li/>，其中（假设#list提供外部<ul/>）您真正需要的内容如下： / p>

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

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

1 个答案: