Question

我有一个提出网址请求的集合，

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元素中，但我不知道该怎么做。对我来说下一步是什么？

Answer 1

在对您的源代码进行一些游戏后，我提出了以下解决方案：

＆＃13;

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

＆＃13;

<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}}属性配置它。

Answer 2

查看listenTo和the list of built in events.

我想你可能想听听收集的事件，并在发生变化时调用渲染方法。

例如，您可以将其添加到初始化中，以便在获取集合时重新呈现：

this.listenTo(this.collection, 'sync', this.render);

或者，您可以在将单个项目添加到集合中时将其呈现：

this.listenTo(this.collection, 'add', this.renderItem);

使用主干遍历每个JSON记录并在列表中显示

2 个答案: