是否可以仅重新呈现模板的一部分

时间:2014-10-25 15:10:20

标签: javascript jquery backbone.js

我有一个包含div #entries#movies的模板在我的#entries div中,我展示了我的电影收藏品的模型。在我的#movies div中,我显示了searchquery的结果。 (元素的命名非常糟糕,我同意)。

在呈现模板的视图中,我有以下事件,

  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()

li元素在#movies div中呈现。这样我就可以从不同的视图中单击结果并将它们添加到其他集合中。这有效,但存在问题。

在同一视图中我有这个,

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

问题是当集合发生变化时(比如我从中添加或删除电影),它会重新呈现模板。这意味着它会重新呈现#entries#movies div。但现在它只呈现一个空的#movies div(没有searchquery集合)。

所以我想知道是否可以只渲染模板的一部分。在这种情况下,我只想重新放置#entries div,只留下#movies div。

1 个答案:

答案 0 :(得分:1)

你可以试试这个:

@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;
}

您应该为可以单独渲染的条目创建模板。