1

我正在使用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>

但这是一个语法错误......

我怎样才能做到这一点？

4

1 回答 1

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?
    });
于 2013-04-27T17:22:13.230 回答