CODEWITHSUNDEEP
javascriptjsonbackbone.js
Andrew
Andrew

Reputation: 3589

Backbone Collection not populating fully from JSON

I'm trying to populate a Backbone collection from JSON data. However, after I try populating the collection I'm only getting one of the items when I should be getting 12. Any ideas of what's going on?

JS:

(function ($) {


    var Sponsor = Backbone.Model.extend({
        defaults: {
            link: "http://www.google.com",
            photo: "http://placekitten.com/g/500/500"
        }
    });

    var Sponsors = Backbone.Collection.extend({
        model:  Sponsor,
        url: '../json/sponsors.json'
    });

    var SponsorView = Backbone.View.extend({
        tagName: "li",
        className: "sponsors-container",
        template: $("#sponsorTemplate").html(),
        render: function() {
            var tmpl = _.template(this.template);

            this.$el.html(tmpl(this.model.toJSON()));
            return this;
        }
    });

    var SponsorsView = Backbone.View.extend({
        el: $(".sponsors"),

        initialize: function() {
            this.collection = new Sponsors();
            this.collection.on("sync", this.render, this);
            this.collection.fetch();
        },

        render: function() {
            var that = this;
            _.each(this.collection.models, function(item) {
                that.renderSponsor(item)
            }, this);
        },

        renderSponsor: function(item) {
            var sponsorView = new SponsorView({
                model: item
            });
            this.$el.append(sponsorView.render().el);
        }
    });
    var sponsor = new SponsorsView();
} (jQuery));

JSON:

{
    "sponsors":[
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"}, 
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"}, 
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"}, 
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"}, 
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"},
        {"link":"http://google.com", "photo":"http://placekitten.com/g/500/500"}
    ]
}

HTML:

<ul class="sponsors"></ul>
<script id="sponsorTemplate"type="text/template">

            <a href="<%= link %>"><img src="<%= photo %>" /></a>

    </script>

Upvotes: 0

Views: 54

Answers (1)

u.k
u.k

Reputation: 3091

You data is an object and not an array, which is what a backbone collection expecting.

You have two options:

  1. Change the data to be an array.
  2. Add a parse method to the collection that gets the array you need out of the structure:
Backbone.Collection.extend({
  parse: function (payload) {
    return payload.sponsors
  }
})

Upvotes: 2

Related Questions