0

アイテムのリストとクエリ テキスト フィールドがあります。テキストフィールドにクエリを入力すると、クエリに基づいてアイテムのリストをフィルタリングしたいと考えています。これどうやってするの？

ビューにイベントを追加しました：

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

2 に答える 2

0

アンダースコアのfilterメソッドを使用してコレクションをフィルタリングし、必要な結果のみを返すことができます。参照: http://underscorejs.org/#filter

次に、このフィルターの結果を使用して、アイテムを表示するビューを再レンダリングします。

于 2013-02-13T19:33:12.473 に答える
0

再レンダリングして、次のようにすることができます。

appendLink: (link) ->
    if( link.get('someAttribute') === this.filterValue)
        view = new Hotlynx.Views.Link(model: link)
        $('#all_links').append(view.render().el)
于 2013-02-13T19:49:18.050 に答える