Get JSON data in View for Backbone.js

Question

Here's my code. Feel free to tell me what I'm doing wrong or right. I'm trying to store everything in the PhishVids object. If this is the wrong way to do things, please let me know.

My JSON is stored in /shows/YEAR.json. The years range from 1987-2011. I can't seem to get the JSON loaded in, so can anyone point me in the right direction?

var PhishVids = {
    Models: {
        Show: Backbone.Model.extend({
            defaults: {
                showid: 'show id',
                year: 'year',
                month: 'month',
                day: 'day',
                venue: 'venue'
            }
        })
    },

    Views: {
        Show: Backbone.View.extend({
            el: $('#content'),
            initialize: function() {
                this.model.fetch();
                this.model.bind('change', this.render, this);
            },
            render: function(event) {
                var compiled_template = _.template($("#shows-template").html());
                this.el.html(compiled_template(this.model.toJSON()));
                return this; //recommended as this enables calls to be chained.
            },
            events: {
                "click .show": "showClick"
            },
            showClick: function(event) {

            }
        })
    },

    Collections: {
        ShowList: Backbone.Collection.extend({
            parse: function(response) {
                return response.items;
            }
        })
    }

};

Show Template:

<script type="text/template" id="shows_template">
    <a href='/<%= year %>/<%= month %>/<%= day %>' class='show <%= month %> <%= day %>' id='<%= showid %>'><%= month %>/<%= day %></a>
    <div class='venue'><%= venue %></div>
</script>

In JS you have #shows-template and in template the id is show_template. — kubetz
– kubetz, Commented Dec 23, 2011 at 2:08
You're right, thanks. But that doesn't entirely solve my problem. — switz
– switz, Commented Dec 23, 2011 at 2:12

taxilian · Accepted Answer · 2011-12-23 02:36:32Z

1

I can see a few problems here. Without seeing the calling code, an example of your JSON, and knowing a bit more about what you are trying to do it's impossible to know what you are actually doing. However, here are a few things I notice right off:

1) When you fetch a collection, the collection will create model instances out of the data it receives (which should be an array of objects). It will use this.model as the type, but you haven't defined what model should be...

2) Neither your model nor your collection has either url or urlRoot members which would tell them how to fetch

3) In your view object, your initialize function (which is called right after the object is constructed) references this.model, which hasn't been set anywhere and will therefore be undefined

Generally if you're going to use something like this you should first instantiate the collection (new object()) and then call .fetch() to get the data. fetch() can either accept an object with success and error as callbacks or it returns a jquery deferred object (if you're using jquery) that you can use .done(..) and .fail(..) to find out when it finished.

Then you can pass the model in as an option (part of an object) into the new ...View({model: model_you_want}), etc, and use that to render.

Hope that helps

answered Dec 23, 2011 at 2:36

taxilian

14.3k4 gold badges36 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

switz Over a year ago

Fetch returned success, but done and fail were both empty.

taxilian Over a year ago

you probably either aren't using jquery or aren't using a new enough version of jQuery. With jQuery (current ver) .fetch() will return a deferred object, so collectObj.done(function() { /* here you can use collectObj / }).fail(function(err) { / here you handle an error */ }); would work

Collectives™ on Stack Overflow

Get JSON data in View for Backbone.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related