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 - 使用输入值筛选集合

回答

相关问题