Question

我正在寻找一种方法来使用输入字段中的值来过滤我的主干集合 - 为了实现这一点，我使用视图定义了一个事件监听器（“keyup input.searchBookmark”：“search”）：

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>

input元素不在元素“bookmarksList”中。

我的问题是如果我在输入中输入一些文字没有任何反应 - 可能是什么问题？

Answer 1

在Backbone视图中使用events对象时，they are bound using jQuery's delegate：

delegateEvents delegateEvents([events])

使用jQuery的delegate函数为视图中的DOM事件提供声明性回调。如果未直接传递events哈希，请使用this.events作为源。

因此，只有视图this.el中的元素才会使用视图events绑定。你说那个

input元素不在元素“bookmarksList”
中

所以没有任何内容绑定到input.searchBookmark，您的search方法永远不会被调用。

您有几个选择：

将搜索框移至#bookmarksList，以便列表是自包含的。
将搜索事件处理移至包含搜索框的视图。然后为#bookmarksList设置单独的书签集合，以在集合更改时显示和更新显示。然后，带有搜索框的视图可以过滤主书签集合，更新#bookmarksList使用的集合，并让Backbone的事件处理从那里获取。
在呈现input.searchBookmark视图时手动绑定到#bookmarksList，并在其remove方法中取消绑定。

前两个是非常标准的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...
    },
    //...
});

我不推荐这种做法，你的意见应该自己动手。

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)

        ...

backbone.js - 使用输入中的值过滤集合

2 个答案: