Backbone - populate collection from json and update view

Question

I am trying to populate a collection with data from a JSON file. I'm a backbone beginner, so my problems are probably easy to solve. But have struggled with this all day - so now I'm asking for guidance.

I am creating a questionnaire, and want to load the questions from a JSON file stored locally (I will get the questions from a server later).

I am not sure if my collection gets populated at all, or if the problem is that the view doesn't update. I have read a lot of tutorials and have got some ideas from different places.

Well.. this is my javascript code:

$(function(){

var Question = Backbone.Model.extend({

    defaults: {
        q: "Empty question..."
    },

    initialize: function() {
        if (!this.get("q")) {
            this.set({"q": this.defaults.q});
        }
    }
});


var QuestionList = Backbone.Collection.extend({
    model: Question,
    url: "question.json"
});

var Questions = new QuestionList;


var QuestionView = Backbone.View.extend({

    tagName:  "li",

    template: _.template($('#item-template').html()),

    initialize: function() {
        _.bindAll(this, 'render', 'remove');
        this.model.bind('change', this.render);
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});


var AppView = Backbone.View.extend({

    el: $("#questionnaire_app"),

    itemTemplate: _.template($('#item-template').html()),

    initialize: function() {
        _.bindAll(this, 'addOne', 'addAll', 'render');

        Questions.bind('reset',   this.addAll);
        Questions.fetch();
    },

    addOne: function(question) {
        var view = new QuestionView({model: question});
        this.$("#question-list").append(view.render().el);
    },

    addAll: function() {
        Questions.each(this.addOne);
    }
});

var App = new AppView;

});

And I have the following HTML code:

<div id="questionnaire_app">
    <div class="title">
        <h1>Questions</h1>
    </div>
    <div class="content">
        <div id="questions">
            <ul id="question-list"></ul>
        </div>
    </div>
</div>

<script type="text/template" id="item-template">
    <div class="question">
        <div class="display">
            <p class="question-content"><%= q %></p>
        </div>
    </div>
</script>

The JSON file looks like this:

[
    {
        "q": "How were your meeting with Dr. Apfelstrudel?"
    },
    {
        "q": "What do you think of the movie Die Hard 4.0"
    },
    {
        "q": "Are people from Mars really green?"
    }
]

Bonus question: I use firebug, but find it very difficult to debug this stuff. If i e.g write console.log(Questions); in the console do I get ReferenceError: Questions is not defined. Why is that?

UPDATE: Problem solved. I didn't use a web server before, which I do now (I just opened the file in the browser). The code works fine.

Answer 1

I tested your code and it seems to run fine by me.

EDIT: Here's a link to a working fiddle with your code, just modified that instead of fetching the models I manually add the list (since I don't see how i can duplicate that in the jsfiddle). Maybe your problem is with your JSON file (read only, wrong location).

The reason why you get a reference error in firebug is because the questions reference going out of scope at the end of the document ready function, if you assign it to something you will be able to log it.

For example

var q = {};

$(function() {

  // Your code
  var Questions = new QuestionList;
   q.Questions = Questions
 //the rest of your code
});

Now you can log it in firebug using console.log(q.Questions);