Is it possible to only rerender a part of a template

Question

I have a template with the divs #entries and #movies In my #entries div I show the models of my movie collection. In my #movies div I show the results of a searchquery. (The naming of elements is quite bad, I agree).

In the view which renders the template I have the following events,

  events: -> 
    "click li": "addEntry" 
    "click .remove": "destroyEntry" 

  addEntry: (e) -> 
    movie_title = $(e.target).text()
    @collection.create title: movie_title

  appendEntry: (entry) ->
    view = new Movieseat.Views.Entry(model: entry)
    $('#entries').append(view.render().el)

  destroyEntry: (e) -> 
    thisid = @$(e.currentTarget).closest('div').data('id')
    @collection.get(thisid).destroy()

The li element gets rendered in the #movies div. This way I can click on the results from a different view and add them into a other collection. This works, but there's a problem.

In the same view I have this,

  initialize: -> 
    @collection.on('change', @render, this)
    @collection.on('add', @appendEntry, this)
    @collection.on('destroy', @render, this)
    return

The problem is that when the collection changes (like when I add or remove a movie from it) it rerenders the template. This means it rerenders the #entries and #movies div. But now it just renders a empty #movies div (without the searchquery collection).

So I was wondering if it's possible to only render a part of a template. In this case I would like to only rerender the #entries div and just leave the #movies div alone.

score 1 · Accepted Answer · answered Oct 25 '14 at 18:28

1

you can try this:

@collection.on('change', @renderEntries, this)

renderEntries: (entry) ->
    $('#entries').html(render('entries', { entries: yourEntriesCollection.toJSON() }))

//some common.js file

function render(template_name, data)
{
    //here create logic to render specified template by name with data.
    // see example here: http://stackoverflow.com/questions/8366733/external-template-in-underscore
    return html;
}

you should create template for entries which you can render separately.

answered Oct 25 '14 at 18:28

aleha_84

8,309
2
38
46

So you're saying when the collection changes do the `renderEntries` function. The `renderEntries` function updates the html of the `#entries` div with the content from the collection. Does the 'render' part in `$('#entries').html(render` refer to the `function render(template_name, data)` ? – Peter Boomsma Oct 25 '14 at 18:36
yes, render function is just some utilite you can create to use it anywhere in your app. – aleha_84 Oct 25 '14 at 18:39
Hm I'm having some trouble understanding `$('#entries').html(render('entries',{entries: yourEntriesCollection.toJSON()}))` I tried it with `$('#entries').html('hello)` which does replace current HTML with `hello`. But I don't understand how to connect this with the template I use to output my data. I have the template in a different folder. Also I don't understand what `{ entries: yourEntriesCollection.toJSON() }` does, or why if I would need it. – Peter Boomsma Oct 25 '14 at 18:48
you sad that you need to rerender just your entries. So you need somehow render your entries collection. In proposed solution you need to send your collection (in toJSON() format) to some rendering engine which uses template for entries (which you should create) – aleha_84 Oct 25 '14 at 18:56

Is it possible to only rerender a part of a template

1 Answers1