Question

我正在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进行模板化。

模板应该如何显示

Answer 1

请注意，true和false是Javascript中的 ~~reserved~~ 关键字。我建议你不要把它当作变量名。

<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/

Backbone.js任务应用程序应如何分组视图

1 个答案: