Backbone.js Task App how should grouped view look like

Question

I am developing a task app in Backbone.js for FUN and one of feature is grouped view. Grouped view will display tasks that are grouped according to their done status. Currently i can construct the grouped object from the collection. Constructing the view has become trivial to me. Here is a snapshot of how i want the view to look like

Completed Tasks

- Water the Garden

- Clean my closet

Pending Tasks

- Watch Whose line is it anyway

the JSON after grouping is below

{
    "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"
    }]
}

I can't think of how to construct a template for the UI based on grouped json above. Assuming i am using underscore.js _.template for templating purpose.

How should the template look

theotheo · Accepted Answer · 2012-06-15T11:15:15.967

1

Keep in mind, true and false are ~~reserved~~ keywords in Javascript. I suggest you don't use it as variable names.

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

edited Jun 15 '12 at 11:15

answered Jun 15 '12 at 10:56

theotheo

2,664
1
23
21

that worked. I also do get ` _.extend _.clone _.extend.toJSON App.Tasks.View.AppView.Backbone.View.extend.GroupBy f.event.dispatch f.event.add.h.handle.i`. when the previous view is removed. I do it with below code `view.undelegateevents();view.remove();` – Deeptechtons Jun 15 '12 at 11:20
Hmm… I think you should probably create a separate question for this issue. And could you please post some code that is relevant to it? What does `undelegateevents?` method do? – theotheo Jun 15 '12 at 11:40
no problem. It was one of Zombie problem. I had a reference to View instance through window object even though it was cleared out. – Deeptechtons Jun 15 '12 at 11:41
I'd guess that `undelegateevents` is a misspelling of [`undelegateEvents`](http://documentcloud.github.com/backbone/#View-undelegateEvents). – mu is too short Jun 15 '12 at 16:12
@muistooshort Aha! I wonder how I didn't realize it. Anyway, it seems to me that the problem was solved. Deeptechtons, am I right? – theotheo Jun 15 '12 at 22:43

Backbone.js Task App how should grouped view look like

1 Answers1