Backbone.js的 - 从输入过滤收集与价值

问题描述

我'寻找一种方式来筛选我收藏骨干从一个输入字段的值 - 要做到这一点，我定义的事件监听器与视图（KEYUP input.searchBookmark：搜索）：

I'am searching for a way to filter my backbone collection with the value from a input field - to achieve this, I defined an event listener with the view ("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>

输入元素不是元素bookmarksList之内。

The input element is not within the element "bookmarksList".

我的问题是，如果我输入一些文本输入什么也没有发生 - 这可能是问题。

My problem is that nothing happens if I enter some text into the input - what could be the problem?

推荐答案

当您使用事件对象中的骨干视图，的：

When you use an events object in a Backbone view, they are bound using jQuery's delegate:

delegateEvents delegateEvents（[赛事]）

使用jQuery的委托函数的视图中的DOM事件提供声明回调。如果散不直接传递了一个事件，使用 this.events 作为源。

Uses jQuery's delegate function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source.

因此​​，只有不到的元素视图的 this.el 将使用视图的事件被绑定。你说

So only elements that are within the view's this.el will be bound using the view's events. You say that

输入元素不是元素中bookmarksList

所以没有被绑定到 input.searchBookmark 和您的搜索方法不会被调用。

so nothing gets bound to input.searchBookmark and your search method never gets called.

您有几种选择：

1. 将搜索框到 #bookmarksList 这样的名单自成体系。


2. 将搜索事件处理到包含搜索框的观点。然后设置书签为 #bookmarksList 一个单独的集合来显示和更新显示集合更改时。然后在搜索框中视图可以过滤主要书签收集，更新集合 #bookmarksList 使用，让骨干的事件处理把它从那里。


3. 手动绑定到 input.searchBookmark 当你的 #bookmarksList 视图显示，并在其<$ C $解除绑定C>删除方法。

1. Move the search box into #bookmarksList so that the list is self-contained.
2. Move the search event handling to the view that contains the search box. Then set up a separate collection of bookmarks for #bookmarksList to display and update the display when the collection changes. Then the view with the search box can filter the main bookmark collection, update the collection that #bookmarksList uses, and let Backbone's event handling take it from there.
3. Manually bind to input.searchBookmark when your #bookmarksList view is rendered and unbind in its remove method.

前两个是pretty标准骨干设置所以没有多说关于他们;第三个是有点不正常，会是这个样子：

The first two are pretty standard Backbone setups so there's not much more to say about them; the third is a bit odd and would look something like this:

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

我不推荐这种方法虽然，你的观点应该保持自己的双手给自己。

I don't recommend this approach though, your views should keep their hands to themselves.

这篇关于Backbone.js的 - 从输入过滤收集与价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！