Uncaught ReferenceError: text is not defined

Question

http://jsfiddle.net/3pSg7/

I wonder if someone can help to find what's wrong in this case. I get "Uncaught ReferenceError: text is not defined" in line 6. Using template and local .txt files for testing until APIs are available.

Backbone.js model script:

var Letter = Backbone.Model.extend( {
urlRoot: 'data/json/news',  
initialize: function() {
},
defaults: {
    _type: "",
    text: "",       
    is_read: 0
}
});

var News = Backbone.Collection.extend({
    model: Letter,
    url: 'data/json/list_news.txt',
    initialize: function() {
    },
    fetchMyNews: function() {
        this.fetch({async:false});
    }
});

var news = new News();

View script:

var NewsView = Backbone.View.extend({
initialize: function() {
    this.isShown = false;
    this.render();
    this.listenTo(news, "all", this.doListen);
},

doListen: function(eventName){
    if(eventName == "change"){
        this.render();
    }
},

isShown: false, 

events: {
},

render: function() {
    this.$el.attr("z-index", "1000");

    news.fetchMyNews();
    var sHtml = JST["news/row"](news.attributes);
    $("#news_tbody").html(sHtml);
}
});

Answer 1

a few things in your code.

you are defining a global variable 'news' for your collection. that's not recommend, you can just pass a new collection to your view when you instantiate it :

var NewsView = new NewsView({
  collection: new News()
});

and change all your 'news' reference in the view to 'this.collection'

and, I usually don't like async ajax calls. try to change them to callbacks, or just listen to events in your view. oh, and also, try not to fetch data in your render(). your function should only do what they are named for. :)

so in your view:

initialize: function() {
  this.isShown = false;
  this.listenTo(this.collection, "all", this.doListen);
  this.collection.fetch();
},

doListen: function(eventName){
  if(eventName == "change" || eventName == 'reset'){
    this.render();
  }
}

and in your render:

var sHtml = JST["news/row"](new.attributes);
$("#news_tbody").html(sHtml);

you are calling news.attributes, news is a collection here..."attributes" doesn't give you anything. I'm not sure what your template looks like, but you may be calling '.text' in your template, which is giving your this error here since news.attributes is undefined.