篩選項目列表

我有一個項目列表和一個查詢文本框。當我在文本框中輸入查詢時，我想根據查詢過濾項目列表。我怎樣才能做到這一點？篩選項目列表

在視圖中我添加了一個事件：

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

來源

2013-02-13 John

什麼是您的視圖代碼是什麼樣子？您可能希望僅保留集合並重新呈現視圖，只添加與過濾器匹配的項目。 – 2013-02-13 18:56:22

您可以使用下劃線的filter方法來過濾收集和只返回你想要的結果。請參閱：http://underscorejs.org/#filter

然後，您將使用此過濾器的結果重新呈現顯示項目的視圖。

來源

2013-02-13 19:33:12 Tomdarkness

你可以只重新渲染，做這樣的事情：

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

來源

2013-02-13 19:49:18

篩選項目列表

回答

相關問題