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 自体は、このようなインライン スタイルのレンダリングに問題はありません。

これらの色の16進値の前に を付ける必要があること#に注意してください.;<div class="colorDiv" style="background-color: #{{:color}};"></div>

また、データの配列を単一の に直接バインドしようとしているようです( outer を提供すると<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 に答える