backbone.js - фильтрация коллекции со значением из ввода

Question

Я ищу способ фильтрации моей базовой сети со значением из поля ввода - для этого я определил прослушиватель событий с представлением (" KeyUp input.searchBookmark ": "поиск"):

window.BookmarksListView = Backbone.View.extend({ 
    events: { 
     "keyup input.searchBookmark": "search" 
    }, 
    el: $('#bookmarksList'), 
    initialize: function() { 
     this.model.bind("reset", this.render, this); 
     this.model.bind("add", function(bookmark) { 
      $('#bookmarksList').append(new BookmarksListItemView({model: bookmark}).render().el) 
     }); 
    }, 
    render: function(eventName) { 
     _.each(this.model.models, function(Bookmarks) { 
      $(this.el).append(new BookmarksListItemView({model: Bookmarks}).render().el); 
     }, this); 
     return this; 
    }, 
    renderList: function(bookmarks) { 
     alert(bookmarks); 
    }, 
    search: function(event) { 
     alert(event); 
     var query = $("#searchBookmark").val(); 
     this.renderList(this.model.search(query)); 
    } 
}); 

HTML-:

<form class="pull-left" action=""> 
    <input placeholder="Bookmarks..." type="text" class="searchBookmark" id="searchBookmark" value=""> 
</form> 

входной элемент не в элементе "bookmarksList".

Моя проблема заключается в том, что ничего не происходит, если я ввожу какой-либо текст во входные данные - что может быть проблемой?

Answer 1

При использовании events объекта в представлении Backbone, they are bound using jQuery's delegate:

delegateEventsdelegateEvents([events])

delegate использует функцию JQuery, чтобы обеспечить декларативные обратные вызовы для событий DOM внутри вида. Если хеш events не передается напрямую, в качестве источника используется this.events.

Так только элементы, которые находятся в функции представления this.el будет связан с помощью функции представления events. Вы говорите, что

Входной элемент не находится в пределах элемента «bookmarksList»

чтобы ничего не связанного с input.searchBookmark и ваш метод search никогда не вызывается.

У вас есть несколько вариантов:

1. Переместить окно поиска в #bookmarksList так, что список является самодостаточным.
2. Переместить обработку события поиска в представление, содержащее поле поиска. Затем настройте отдельный набор закладок для #bookmarksList, чтобы отображать и обновлять отображение при изменении коллекции. Затем представление с полем поиска может фильтровать основную коллекцию закладок, обновлять коллекцию, которую использует #bookmarksList, и позволить обработке событий Backbone взять ее оттуда.
3. Вручную привязать к input.searchBookmark, когда ваш #bookmarksList вид визуализируется и отвязывается в его методе remove.

Первые два являются довольно стандартными базовыми установками, поэтому о них больше нечего сказать; третий немного странно и будет выглядеть примерно так:

window.BookmarksListView = Backbone.View.extend({ 
    events: { }, 
    initialize: function() { 
     _.bindAll(this, 'search'); 
     //... 
    }, 
    render: function(eventName) { 
     $('input.searchBookmark').on('keyup', this.search); 
     //... 
    }, 
    remove: function() { 
     $('input.searchBookmark').off('keyup', this.search); 
     // Other cleanup... 
    }, 
    //... 
}); 

Я не рекомендую этот подход, хотя, ваши взгляды должны держать свои руки к себе.

Answer 2

Я обработка фильтрации, имея вид на поле ввода, который вызывает сообщение:

class App.Views.SidebarListSearchView extends Backbone.View 

    el: "input#list-search" 

    events: 
     keyup: "filter" 

    # Send a message with the value we are searching for. 
    filter: => App.Mediator.trigger("filterLists", $(@el).attr("value")) 

...что другие виды прослушивают:

class App.Views.SidebarFolderView extends Backbone.View 

    ... 

    initialize: -> 
     # Re-render the shebang with a filter applied. 
     App.Mediator.bind("filterLists", @filterLists) 

     ...