0

我有一个文本输入，用于从用户那里收集关键字，然后发送一个 ajax 请求（获得成功的结果）。我想附加项目<ul>，<li>每个项目代表一个结果。

这是包含搜索输入并应获得附加<li>结果的内容。

<div class="search_group pull-right">   
    <h5><a href="javascript:void(0);" class="show-groups">Find Other Groups<span class="caret"></span></a></h5>
    <ul>
        <li class="search-input">
            <input type="text" class="search" name="search">
        </li>
    </ul>
</div>

我有以下下划线模板，它可以理想地代表集合中的每个结果。

<script type="text/template" class="template" id="template-search-result">
    <% _.each(results,function(result){ %>
        <li class="result">
            <a href="/surnames/<%=URL%>">
                <%=result.name%>
                <span><%=result.members%> &ndash; Members</span>
                <span><%=result.ancestors%> &ndash; Ancestors</span>
            </a>
        </li>
    <% }); %>
</script>

现在，我的主干代码。

在用户在输入字段中输入内容后，我获取了我的结果集合，并且当该集合从我的服务器返回结果（我可以在控制台中成功看到）时，我希望 ResultView 将 ul 附加到额外的 li 结果。

window.Results = Backbone.Collection.extend({

    url: function() {
        return '/ajax/groups/search?q=' + query;
    }

});

var results = new Results();

window.SearchInput = Backbone.View.extend({
    el: ".search-input input",
    events: {
        "change": "getResults",
        "keyup": "getResults",
        "keydown": "getResults",
        "paste": "getResults"
    },
    getResults: function() {
        query = $('input').val();
        results.fetch();
    }
});

var searchInput = new SearchInput({ collection: results });

window.ResultView = Backbone.View.extend({

    el: ".search-group ul",
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.bind('change', this.render);
        this.template = _.template($("#template-search-result").html());
    },
    render: function() {
        this.$el.append( this.template( {results: this.collection.toJSON()} ));
        return this;
    }
});

var resultView = new ResultView({ collection: results });
4

2 回答 2

0

您正在寻找add或reset事件，这取决于您加载收藏的方式。

如果你在做一个fetch，你会想听reset。如果您手动将模型添加到集合中，或者调用fetch({update:true})，您将获得 add事件。

change仅当集合的模型之一触发change它自己的模型时，集合事件才会触发。

这是所有内置 Backbone 事件的列表以供参考。

于 2013-02-08T16:31:43.490 回答
0

而不是在我的 ResultView 中将“el”定义为：

el: ".search-group ul",

我将其更改为 id 并相应地修改了我的标记：

el: "#result-list",

和：

<ul id="result-list">
    <li class="search-input">
        <input type="text" class="search" name="search">
    </li>
</ul>
于 2013-02-11T15:28:15.467 回答