2

私は backbone.js が初めてで、少し苦労しています。サーバーから（jsonで）データを画面に正常に取得する方法を見つけましたが、正しい/最善の方法で行っていますか?

私のすべてのビューには this.el が設定されていますが、ビューのイベントが起動していません ()... 最善の方法は何ですか?

コードは次のとおりです。

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

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

AnswerOptionView = Backbone.View.extend({

    initialize: function () {
        _.bindAll(this, 'updateCheckedState');
    },

    events: {
        "click .answerOptionControl": "updateCheckedState" //still noy firing :-(
    },

    render: function() {
        this.model.get('answerOption').questionChoiceType = this.model.get('questionChoiceType');
        var template = _.template($("#questionAnswerOptionTemplate").html(), this.model.get('answerOption'));

        $(this.el).html(template);
        return this;
    },

    updateCheckedState: function(e) {
        alert("Here is my event origin: " + e.target)
    }
});

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

QuestionView = Backbone.View.extend({
    render: function() {

        var template = _.template($("#questionTemplate").html(), this.model.get('question'));
        $(this.el).html(template);

        /*validator code removed*/

        for (var i = 0; i < this.model.get('question').answerOptions.length; i++) {
            var qModel = new AnswerOption({
                answerOption: this.model.get('question').answerOptions[i]
            });

            var view = new AnswerOptionView({ model: qModel });

            this.$('fieldset').append(view.render().el.innerHTML);
        }

        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
});

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

    // Re-render the contents
    render: function () {
        for (var i = 0; i < this.model.attributes[0].questions.length; i++) {

            var view = new QuestionView();
            var qModel = new Question({
                question: this.model.attributes[0].questions[i]
            });

            view.model = qModel;
            $(this.el).append(view.render().el.innerHTML);
        }

        this.el.trigger('create');
    }
});

$(document).ready(
function () {
    aSurvey = new Survey({ Id: 1 });
    window.App = new SurveyView({ model: aSurvey, el: $("#questions") });
    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>

そして、サーバーからの JSON:

? ({
    "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)\/"
})
4

1 に答える 1

1

サブビューを追加する方法が原因で機能しません

this.$('fieldset').append(view.render().el.innerHTML);

Backbone.Views でイベント処理が機能する方法は、要素にアタッチされるのではなく、イベントがビューのルート要素にアタッチされてから、子要素に委任されるというものです。あなたの場合、サブビューのルート要素を親ビューに追加する代わりに、そのコンテンツを追加して、イベントをバインドする要素がDOMに到達しないため、イベント処理を壊します。

this.$('fieldset').append(view.render().el);

innerHTMLプロパティを削除すると、再び機能します。Backbone.Views をインスタンス化するときに要素をラッピングしたくない場合は、elオプション プロパティとして要求される要素をいつでも渡すことができます。

var view = new AnswerOptionView({ model: qModel, el: this.$('fieldset') }).render();

このようにして、 AnswerOptinView は fieldset 要素を要求し、イベントをそれにバインドします。

于 2012-04-07T08:26:06.877 に答える