Backbone查看并非追加收藏更改

我有一个文本输入，用于从用户收集关键字，然后发送ajax请求（即获得成功的结果）。我想附加<ul>和<li>项目，每项代表一个结果。Backbone查看并非追加收藏更改

下面是其中包含搜索输入，并应得到附加的<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李结果。

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 });

来源

2013-02-08 brianrhea

而是在我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-11 15:28:15 brianrhea

你要么寻找add或reset事件，这取决于你如何加载您的收藏。

如果你正在做fetch，你会想要听reset。如果您要手动向模型添加模型，或拨打fetch({update:true})，您将获得add事件。

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

以下是list of all the built-in Backbone events供参考。

来源

2013-02-08 16:31:43 jevakallio

Backbone查看并非追加收藏更改

回答

相关问题