如何使用响应中的新数据更新集合和视图?

时间:2013-10-23 14:36:04

标签: backbone.js coffeescript backbone-views

如何使用handleSliderChange()中来自服务器的新数据更新帖子集合?当我尝试在fetch()集合中使用$.getJSON时,会使用旧数据重置。

define ['jquery','backbone','app','views/posts/post_view','templates/posts/index'], 
($, Backbone, App, PostsView) ->
  class App.Views.Posts.IndexView extends Backbone.View
    template: JST["posts/index"]

    events:
      "slidechange #slider":   "handleSliderChange"

    initialize: () ->
      @options.posts.on('reset', @render, @)

    addAll: () ->
      @options.posts.each(@addOne, this)

    addOne: (post) ->
      view = new PostView({model: post})
      $(@el).find("#list").append(view.render().el)

    slider: ->
      $(@el).find("#slider").slider({})

    handleSliderChange: (e, ui) ->
      self = this
      $.getJSON "/posts?scope="+ui.value, (data) ->
        #how to update posts collection with 'data'?

    render: ->
      $(@el).html(@template(posts: @options.posts.toJSON()))
      @slider()
      @addAll()
      @

1 个答案:

答案 0 :(得分:1)

使用Collection.reset将现有集合替换为新模型。假设“/ posts?scope?ui”的响应是一个哈希数组,你可以使用:

$.getJSON "/posts?scope="+ui.value, (data) ->
    self.collection.reset data

请注意,Collection.fetch有点像调用“getJSON”后跟“reset”,因此您可能需要考虑使用它。

options = {}
options["url"] = "/posts?scope="+ui.value
@collection.fetch options