Question

I have an app with a calendar page. On that page I have elements that represent appointments. Here’s how I’ve been going about displaying the appointments up until now:

1. Print all elements onto the page, each one with position: absolute.
2. Iterate over the elements, taking each element’s appointment_id and setting that element’s top attribute based on how late in the day that appointment starts.

In other words, I dump all the appointments on top of each other at top: 0, left: 0, then I move each appointment vertically to the correct position. (It’s a multi-person schedule calendar, not a regular wall calendar.) I do something similar to arrange the appointments into columns, but that’s not important right now.

Here’s my problem: on the initial page load, everything works fine because every appointment element has an id associated with it. When I update an appointment, though, its ID gets wiped out and that appointment gets missed when I do my rearranging. It just sticks in the upper left.

The reason this is happening is clear and makes sense. I just don’t know what to do about it. In Backbone, how can I refer to an element if I can’t use its model’s ID?

To make things more complicated, none of this rearrangement works at all unless I do it after the view is rendered – in other words, I have to do the rearrangement in the router. This seems wrong, and in the scope of the router, I no longer have access to the individual elements. I only have access to the collection that contains the appointment models, and I can only match each model to its element if its element knows its own appointment ID which, after updating, it doesn’t!

Hopefully that all makes sense. Any suggestions?

Answer 1

Each DOM element that represents an appointment should be a separate view that has an Appointment model bound.

When Appointment model changes, all you need to do is to re-render that single view (recalculating only one position and making less DOM operations).

AppointmentView:

AppointmentView = Backbone.View.extend
    # model: Appointment
    tagName: "div"
    events: {}

    initialize: ->
        @model.on 'change:time', @render, @

    render: ->
        # calculate the position and append to the DOM
        # you can take a look at setElement function, if needed - http://documentcloud.github.com/backbone/#View-setElement