0

我正在 Backbone.js 中为FUN开发一个任务应用程序，其中一个功能是分组视图。分组视图将显示根据完成状态分组的任务。目前我可以从集合中构造分组对象。构建视图对我来说变得微不足道。这是我希望视图看起来如何的快照

Completed Tasks

- Water the Garden

- Clean my closet

Pending Tasks

- Watch Whose line is it anyway

分组后的JSON如下

{
    "true": [{
        "Name": "Finished Demo",
        "Done": true,
        "id": "4b3d8d3d-637c-fd5d-034b-b275b5f00e05"
    }, {
        "Name": "This is a new task",
        "Done": true,
        "id": "db5b379f-6f96-346d-4945-baf2d5ac0c76"
    }, {
        "Name": "Clean the closet",
        "Done": true,
        "id": "3b5091e5-a8df-845b-3c6d-2185187eb456"
    }],
    "false": [{
        "Name": "Edited another new task",
        "Done": false,
        "id": "0ee399b2-8fd9-84f2-735e-902d09c625a1"
    }]
}

我想不出如何根据上面的分组 json 为 UI 构建模板。假设我使用 underscore.js_.template进行模板化。

  • 模板的外观应该如何
4

1 回答 1

1

请记住，true并且false是Javascript 中的保留关键字。我建议您不要将其用作变量名。

<ul>
    <% if (finished) { %>
        <% _.each(finished, function (task) { %>
            <li id=<%= task.id %>>
                <%= task.Name %>
            <input type="checkbox" checked />
            </li>
        <% }); %>
    <% }; %>
    <% if (unfinished) { %>
        <% _.each(unfinished, function (task) { %>
            <li id=<%= task.id %>>
                <%= task.Name %>
            <input type="checkbox" />
            </li>
        <% }); %>
    <% }; %>
</ul>

http://jsfiddle.net/theotheo/zJXW8/

于 2012-06-15T10:56:56.483 回答