我有一个提出网址请求的集合,
class Movieseat.Collections.Moviesearch extends Backbone.Collection
url: ->
"http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=#{@query}"
setQuery: (q) ->
@query = q
return
我有一个渲染模板的视图,模板中是一个输入字段。当在输入字段中输入文本时,Collection会使用该值进行更新,并且当输入字段中有一个keyup操作时,将获取该集合。
class Movieseat.Views.Moviesearch extends Backbone.View
template: JST['movieseats/moviesearch']
el: '#moviesearch'
initialize: (opts) ->
{@collection} = opts
@render()
return
render: ->
$(@el).html(@template())
return
events:
"keyup input": "doSearch"
doSearch: (e) ->
inputtext = @$("form#autocomplete-remote input").val()
console.log inputtext
@collection.setQuery $(e.currentTarget).val()
@collection.fetch()
现在我尝试将每个结果呈现在li
元素中,但我不知道该怎么做。对我来说下一步是什么?
答案 0 :(得分:1)
在对您的源代码进行一些游戏后,我提出了以下解决方案:
MoviesCollection = Backbone.Collection.extend({
url: function () {
return "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=" + this.query;
},
setQuery: function (q) {
this.query = q;
},
parse: function (response) {
return response.results;
}
});
ResultsView = Backbone.View.extend({
initialize: function (opts) {
this.collection = opts.collection ;
this.collection.on('sync', this.render, this);
},
el: '#result-list',
template: _.template($("#results_template").html()),
render: function () {
var that = this;
this.$el.html(this.template({movies: this.collection.toJSON()}));
}
});
MoviesView = Backbone.View.extend({
initialize: function (opts) {
this.collection = opts.collection;
this.render();
},
pressDelay: 500,
el: "#search_container",
template: _.template($("#search_template").html()),
render: function(){
this.$el.html(this.template());
var resultsView = new ResultsView({collection: this.collection}) ;
resultsView.render();
},
events: {
'keyup input': 'doSearch'
},
doSearch: function (event) {
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
this.timeoutId = setTimeout($.proxy(this.fetchValues, this), this.pressDelay);
},
fetchValues: function() {
// add check here for empty values, no need to fetch collection if input is empty
var inputtext = this.$el.find('input').val();
console.log (inputtext);
var that = this;
this.collection.setQuery(inputtext);
this.collection.fetch();
}
});
myCollection = new MoviesCollection();
var search_view = new MoviesView({
collection: myCollection
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/template" id="results_template">
<ul id="search_container-results">
<% _.each(movies, function(movie) { %>
<li class="original_title"><%= movie.title %></li>
<% }); %>
</ul>
</script>
<div id="search_container"></div>
<script type="text/template" id="search_template">
<form id="autocomplete-remote">
<input type="text" id="search_input" value="Star" />
<input type="button" id="search_button" value="Search" />
</form>
<div id="result-list">
</div>
</script>
&#13;
我在输入事件之间添加了超时,以增加查询频率。您可以使用pressDelay
的{{1}}属性配置它。
答案 1 :(得分:0)
查看listenTo和the list of built in events.
我想你可能想听听收集的事件,并在发生变化时调用渲染方法。
例如,您可以将其添加到初始化中,以便在获取集合时重新呈现:
this.listenTo(this.collection, 'sync', this.render);
或者,您可以在将单个项目添加到集合中时将其呈现:
this.listenTo(this.collection, 'add', this.renderItem);