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）您需要在每次获取时更新网址。

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）你需要删除＆＃39; 1＆＃39;来自你的网址

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/

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

1 个答案: