Question

我有一个文本输入，用于从用户收集关键字，然后发送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>

现在，我的Backbone代码。

我在用户在输入字段中输入内容后获取结果集合，当该集合从我的服务器返回结果时（我可以在控制台中成功查看），我希望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 });

Answer 1

您要么正在寻找add或reset个活动，具体取决于您是如何加载收藏品的。

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

集合change事件仅在集合的某个模型触发其自己的change时触发。

这是一个list of all the built-in Backbone events供参考。

Answer 2

而不是将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>

Backbone View不附加收集更改

2 个答案: