backbone.js - 使用輸入值篩選集合

我正在尋找一種方法來使用來自輸入字段的值來過濾我的主幹集合 - 爲了實現這一點，我使用視圖（「 KEYUP input.searchBookmark「：」搜索「）：backbone.js - 使用輸入值篩選集合

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「。

我的問題是沒有任何反應，如果我在輸入中輸入一些文本 - 可能是什麼問題？

來源

2012-02-11 Marc

當您在一個骨幹視圖使用events對象，they are bound using jQuery's delegate：

delegateEventsdelegateEvents([events])

使用jQuery的delegate功能爲一個視圖中的DOM事件提供聲明回調。如果events散列未直接傳遞，請使用this.events作爲源。

所以只有在視圖的this.el內的元素纔會使用視圖的events進行綁定。你說

輸入元素不是元素「bookmarksList」

所以沒有被綁定到input.searchBookmark和你search方法不會被調用內。

您有幾種選擇：

移動搜索框爲#bookmarksList，這樣的名單是自包含的。
將搜索事件處理移至包含搜索框的視圖。然後爲#bookmarksList設置一個單獨的書籤集合，以在集合更改時顯示和更新顯示。然後，使用搜索框的視圖可以過濾主書籤集合，更新#bookmarksList使用的集合，並讓Backbone的事件處理從中繼承。
當您的#bookmarksList視圖呈現並在其remove方法中取消綁定時，手動綁定到input.searchBookmark。

前兩個是非常標準的Backbone設置，所以沒有太多的關於它們的說法;第三個是有點不正常，會是這個樣子：

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... 
    }, 
    //... 
});

我不推薦這種方法，雖然，你的觀點應該保持自己的雙手給自己。

來源

2012-02-11 23:24:51

我通過具有一個用於觸發消息的輸入欄視圖處理過濾：

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) 

     ...

來源

2012-02-14 08:08:18 Radek

backbone.js - 使用輸入值篩選集合

回答

相關問題