Backbone events not firing (this.el undefined) & general feedback on use of the framework

Posted by Leo on Stack Overflow See other posts from Stack Overflow or by Leo
Published on 2012-04-05T23:13:44Z Indexed on 2012/04/05 23:28 UTC
Read the original article Hit count: 268

Filed under:

I am very new to backbone.js and I am struggling a little. I figured out a way to get data from the server (in json) onto the screen successfully but am I doing it the right/best way?

I know there is something wrong because the only view which contains a valid this.el is the parent view. I suspect that because of this, the events of the view are not firing ()... What is the best way forward?

Here is the code:

var surveyUrl = "/api/Survey?format=json&callback=?";

$(function () {


    AnswerOption = Backbone.Model.extend({});

    AnswerOptionList = Backbone.Collection.extend({
        initialize: function (models, options) {
            this.bind("add", options.view.render);
        }
    });

    AnswerOptionView = Backbone.View.extend({
        initialize: function () {
            this.answerOptionList = new AnswerOptionList(null, {
                view: this
            });
            _.bindAll(this, 'render');
        },
        events: {
            "click .answerOptionControl": "updateCheckedState" //does not fire because there is no this.el
        },

        render: function (model) {
            // Compile the template using underscore
            var template = _.template($("#questionAnswerOptionTemplate").html(), model.answerOption);

            $('#answerOptions' + model.answerOption.questionId + '>fieldset').append(template);
            return this;
        },

        updateCheckedState: function (data) {
            //never hit...
        }
    });

    Question = Backbone.Model.extend({});

    QuestionList = Backbone.Collection.extend({
        initialize: function (models, options) {
            this.bind("add", options.view.render);
        }
    });

    QuestionView = Backbone.View.extend({
        initialize: function () {
            this.questionlist = new QuestionList(null, {
                view: this
            });
            _.bindAll(this, 'render');
        },

        render: function (model) {

            // Compile the template using underscore
            var template = _.template($("#questionTemplate").html(), model.question);
            $("#questions").append(template);

            //append answers using AnswerOptionView
            var view = new AnswerOptionView();

            for (var i = 0; i < model.question.answerOptions.length; i++) {
                var qModel = new AnswerOption();
                qModel.answerOption = model.question.answerOptions[i];
                qModel.questionChoiceType = ChoiceType();
                view.answerOptionList.add(qModel);
            }

            $('#questions').trigger('create');

            return this;
        }
    });

    Survey = Backbone.Model.extend({
        url: function () {
            return this.get("id") ? surveyUrl + '/' + this.get("id") : surveyUrl;
        }
    });

    SurveyList = Backbone.Collection.extend({
        model: Survey,
        url: surveyUrl
    });

    aSurvey = new Survey({
        Id: 1
    });

    SurveyView = Backbone.View.extend({
        model: aSurvey,
        initialize: function () {
            _.bindAll(this, 'render');
            this.model.bind('refresh', this.render);
            this.model.bind('change', this.render);
            this.model.view = this;
        },

        // Re-render the contents
        render: function () {
            var view = new QuestionView(); //{el:this.el});
            for (var i = 0; i < this.model.attributes[0].questions.length; i++) {
                var qModel = new Question();
                qModel.question = this.model.attributes[0].questions[i];
                view.questionlist.add(qModel);
            }
        }
    });

    window.App = new SurveyView(aSurvey);
    aSurvey.fetch();

});

-html

<body>
    <div id="questions"></div>
    <!-- Templates -->
    <script type="text/template" id="questionAnswerOptionTemplate">
        <input name="answerOptionGroup<%= questionId %>" id="answerOptionInput<%= id %>" type="checkbox" class="answerOptionControl"/> 
        <label for="answerOptionInput<%= id %>"><%= text %></label> 
    </script>
    <script type="text/template" id="questionTemplate">
        <div id="question<%=id %>" class="questionWithCurve">
            <h1><%= headerText %></h1>
            <h2><%= subText %></h2>
            <div data-role="fieldcontain" id="answerOptions<%= id %>" >
                <fieldset data-role="controlgroup" data-type="vertical">
                    <legend> </legend>
                </fieldset>
            </div>
        </div>
    </script>
</body>

And the JSON from the server:

? ({
    "name": "Survey",
    "questions": [{
        "surveyId": 1,
        "headerText": "Question 1",
        "subText": "subtext",
        "type": "Choice",
        "positionOrder": 1,
        "answerOptions": [{
            "questionId": 1,
            "text": "Question 1 - Option 1",
            "positionOrder": 1,
            "id": 1,
            "createdOn": "\/Date(1333666034297+0100)\/"
        }, {
            "questionId": 1,
            "text": "Question 1 - Option 2",
            "positionOrder": 2,
            "id": 2,
            "createdOn": "\/Date(1333666034340+0100)\/"
        }, {
            "questionId": 1,
            "text": "Question 1 - Option 3",
            "positionOrder": 3,
            "id": 3,
            "createdOn": "\/Date(1333666034350+0100)\/"
        }],
        "questionValidators": [{
            "questionId": 1,
            "value": "3",
            "type": "MaxAnswers",
            "id": 1,
            "createdOn": "\/Date(1333666034267+0100)\/"
        }, {
            "questionId": 1,
            "value": "1",
            "type": "MinAnswers",
            "id": 2,
            "createdOn": "\/Date(1333666034283+0100)\/"
        }],
        "id": 1,
        "createdOn": "\/Date(1333666034257+0100)\/"
    }, {
        "surveyId": 1,
        "headerText": "Question 2",
        "subText": "subtext",
        "type": "Choice",
        "positionOrder": 2,
        "answerOptions": [{
            "questionId": 2,
            "text": "Question 2 - Option 1",
            "positionOrder": 1,
            "id": 4,
            "createdOn": "\/Date(1333666034427+0100)\/"
        }, {
            "questionId": 2,
            "text": "Question 2 - Option 2",
            "positionOrder": 2,
            "id": 5,
            "createdOn": "\/Date(1333666034440+0100)\/"
        }, {
            "questionId": 2,
            "text": "Question 2 - Option 3",
            "positionOrder": 3,
            "id": 6,
            "createdOn": "\/Date(1333666034447+0100)\/"
        }],
        "questionValidators": [{
            "questionId": 2,
            "value": "3",
            "type": "MaxAnswers",
            "id": 3,
            "createdOn": "\/Date(1333666034407+0100)\/"
        }, {
            "questionId": 2,
            "value": "1",
            "type": "MinAnswers",
            "id": 4,
            "createdOn": "\/Date(1333666034417+0100)\/"
        }],
        "id": 2,
        "createdOn": "\/Date(1333666034377+0100)\/"
    }, {
        "surveyId": 1,
        "headerText": "Question 3",
        "subText": "subtext",
        "type": "Choice",
        "positionOrder": 3,
        "answerOptions": [{
            "questionId": 3,
            "text": "Question 3 - Option 1",
            "positionOrder": 1,
            "id": 7,
            "createdOn": "\/Date(1333666034477+0100)\/"
        }, {
            "questionId": 3,
            "text": "Question 3 - Option 2",
            "positionOrder": 2,
            "id": 8,
            "createdOn": "\/Date(1333666034483+0100)\/"
        }, {
            "questionId": 3,
            "text": "Question 3 - Option 3",
            "positionOrder": 3,
            "id": 9,
            "createdOn": "\/Date(1333666034487+0100)\/"
        }],
        "questionValidators": [{
            "questionId": 3,
            "value": "3",
            "type": "MaxAnswers",
            "id": 5,
            "createdOn": "\/Date(1333666034463+0100)\/"
        }, {
            "questionId": 3,
            "value": "1",
            "type": "MinAnswers",
            "id": 6,
            "createdOn": "\/Date(1333666034470+0100)\/"
        }],
        "id": 3,
        "createdOn": "\/Date(1333666034457+0100)\/"
    }, {
        "surveyId": 1,
        "headerText": "Question 4",
        "subText": "subtext",
        "type": "Choice",
        "positionOrder": 4,
        "answerOptions": [{
            "questionId": 4,
            "text": "Question 4 - Option 1",
            "positionOrder": 1,
            "id": 10,
            "createdOn": "\/Date(1333666034500+0100)\/"
        }, {
            "questionId": 4,
            "text": "Question 4 - Option 2",
            "positionOrder": 2,
            "id": 11,
            "createdOn": "\/Date(1333666034507+0100)\/"
        }, {
            "questionId": 4,
            "text": "Question 4 - Option 3",
            "positionOrder": 3,
            "id": 12,
            "createdOn": "\/Date(1333666034507+0100)\/"
        }],
        "questionValidators": [{
            "questionId": 4,
            "value": "3",
            "type": "MaxAnswers",
            "id": 7,
            "createdOn": "\/Date(1333666034493+0100)\/"
        }, {
            "questionId": 4,
            "value": "1",
            "type": "MinAnswers",
            "id": 8,
            "createdOn": "\/Date(1333666034497+0100)\/"
        }],
        "id": 4,
        "createdOn": "\/Date(1333666034490+0100)\/"
    }],
    "id": 1,
    "createdOn": "\/Date(1333666034243+0100)\/"
})

© Stack Overflow or respective owner

Related posts about backbone.js