Backbone：初始化视图时集合为空

Question

我一直在努力寻找解决这个问题的方法，但我认为我的模式是错误的。

我不知道如何使用collection.fetch() 来获取初始渲染的数据。

我正在调用 Flickr API 来构建一些图像。单击按钮时，应将下一页值传递给collection.url，并提交一个新的 ajax 请求以重新呈现模板。但是，我无法让集合从 Flickr 中提取数据并将其传递给初始渲染时的模板。

这是我当前代码的一个小提琴：http://jsfiddle.net/48WpV/

这是我的 JavaScript：

var urlParameters = {
  page: 1,
  api_key:'a2978e5ce30c337e3b639172d3e1a0d1',
  tags: 'cats',
  method: 'flickr.photos.search',
  per_page: 3,
  format: 'json'
};

var TheModel = Backbone.Model.extend({
  default: {
    photos: '',
    stat: ''   
  }
});

var TheCollection = Backbone.Collection.extend({
  model: TheModel,

  url: 'http://api.flickr.com/services/rest'

});

var TheView = Backbone.View.extend({
  el: '.js-container',

  initialize: function () {
    this.collection = new TheCollection();

    this.fetchData();

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

    return this;
  }, 

  render: function () {        
    var temp = _.template( $('#List').html(), {collection: this.collection.toJSON()} );      
    this.$el.html(temp);   

    return this;
  },

  fetchData: function () {
    var self = this;
    this.collection.fetch({
        type: 'GET',
        dataType:'jsonp',
        data: urlParameters,
        jsonp:'jsoncallback',
        success: function (data) {
           console.log('self.collection =',self.collection.toJSON()); 
        },
        error: function () {
            console.log('ERROR!!!');
        }
    });    

    return this;
  },

  events: {
    'click .js-button': 'nextPage'   
  },

  nextPage: function () {
    urlParameters.page = urlParameters.page + 1;
    this.fetchData();

    return this;
  }

});

var theView = new TheView();
theView.render();

这是我的 HTML：

<script type="text/template" id="List">
    <button class="js-button">Click for the next page</button>
    <% console.log('templates collection=',collection) %>

    <% _.each(collection, function (element, index) { %>
        <% _.each(element.photos.photo, function(ele, i) { %>

           <img src="http://farm<%- ele.farm %>.staticflickr.com/<%- ele.server %>/<%- ele.id %>_<%- ele.secret %>_m.jpg" />

        <% }); %>

    <% }); %>

</script>


<div class="js-container">

</div>

Answer 1

我在您的代码中发现了以下问题：

1) 您需要在每次获取时更新 url。

fetchData: function () {
    var self = this;
    this.collection.fetch({
        url: 'http://api.flickr.com/services/rest/?page=' + pageNumber + '&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=kitten&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?',
        type: 'GET',
        success: function (data) {
           self.collection = data; 
        },
        error: function () {
            console.log('ERROR!!!');
        }
    });    

2) 您需要从您的网址中删除“1”

url: 'http://api.flickr.com/services/rest/?page=' + pageNumber + '1&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=kitten&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?

成为

  url: 'http://api.flickr.com/services/rest/?page=' + pageNumber + '&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=kitten&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?'

3) 您需要将pageNumber + 1; 更改为pageNumber += 1; 才能实际增加值。

4) 你不会在这一行 self.collection = data; 单独调用 fetch() 将返回的值分配给集合。

5) 当然，你需要在每次获取后渲染

这是一个工作代码：http://jsfiddle.net/48WpV/7/