Question

我有一个项目列表和一个查询文本字段。当我在文本字段中输入查询时，我想根据查询过滤项目列表。我怎么能这样做？

在视图中我添加了一个事件：

events: ->
    'submit #query_form'          : 'filterLinks'

这会触发一个函数，我首先清空列表，然后只想显示符合查询条件的项目：

  filterLinks: ->
    query = $('#query').val()
    @collection.reset()

如何过滤清单？

编辑：这是完整视图：

  template: JST['links/index']

  initialize: ->
    @collection.on('reset', @render, this)
    @collection.on('add', @appendLink, this)

  events: ->
    'submit #new_link'            : 'createLink'
    'submit #query_form'          : 'filterLinks'

  render: ->
    $(@el).html(@template())
    @collection.each(@appendLink)
    this

  createLink: (event) ->
    event.preventDefault()
    @collection.create
      title:        $('#title').val()
      description:  $('#description').val()
      url:          $('#url').val()
      category:     $('#category').val()
      votes:        0
    $('#message').append('<div>Link has been added succesfully!</div>').fadeOut(5000)

  appendLink: (link) ->
    view = new Hotlynx.Views.Link(model: link)
    $('#all_links').append(view.render().el)

  filterLinks: ->
    alert($('#query').val())
    @collection.reset()

Answer 1

您可以使用下划线的filter方法过滤集合并仅返回所需的结果。请参阅：http://underscorejs.org/#filter

然后，您将使用此过滤器的结果重新渲染显示项目的视图。

Answer 2

您可以重新渲染并执行以下操作：

appendLink: (link) ->
    if( link.get('someAttribute') === this.filterValue)
        view = new Hotlynx.Views.Link(model: link)
        $('#all_links').append(view.render().el)

过滤项目列表

2 个答案: