CODEWITHSUNDEEP
javascriptjsonbackbone.jsunderscore.jsunderscore.js-templating
Rhaebosis
Rhaebosis

Reputation: 57

Backbone / Underscore / JSON render issue

Trying to get my head around backbone.js but I've hit a stumbling block in that my test code won't display anything. This includes my console.log. The page is able to read the json/js file and no errors are produced I'm just left with nothing. It's hard to debug with nothing!! Errors I can deal with.

Here is my full code (inline for the moment)

(function(){        

    var NewsModel  = Backbone.Model.extend();

    var NewsCollection  = Backbone.Collection.extend({
        model: NewsModel,
        url : 'newsFeed.js'
    });

    var newsList = new NewsCollection ();
    newsList.fetch();
    newsList.bind('reset', function () { console.log(newsList); });

    var NewsView = Backbone.View.extend({
        el : '.newsContainer ul',
        template: _.template($('#NewsTemplate').html()),
    initialize : function() {
    this.render();
    this.model.on('change', this.render, this);
},
         render : function(eventName) {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
}
    });   }());

I am using google drive as a testing ground; links for the full html/code. https://docs.google.com/file/d/0B0mP2FImEQ6qa3hFTG1YUXpQQm8/edit [code View] https://googledrive.com/host/0B0mP2FImEQ6qUnFrU3lGcEplb2s/news.html [browser View]

Any help would be appreciated. I hope when I get past this hurdle I will be fine :)

Upvotes: 0

Views: 98

Answers (2)

Zain Shaikh
Zain Shaikh

Reputation: 6043

I found two problems in your html code

  1. newsContainer is not properly referenced in javascript. You are referencing it as newsConatiner, note the spelling mistake.

  2. Replace feed: feed.models with feed: feed.toJSON() in following line:

    var template = _.template($("#feedTemp").html(), { feed: feed.models });

Let me know if this helps!

Upvotes: 0

Ken Wheeler
Ken Wheeler

Reputation: 1958

The problem here is the format of your data source. You should really just be returning entries for what you are trying to do.

[
    { title: 'first', content: 'blah' },
    { title: 'second', content: 'meh' }
]

nomsayin?

or you could use parse like:

url: 'newsFeed.js',
parse: function(response) {
   return response.responseData.feed.entries;
}

Upvotes: 1

Related Questions