骨干事件不触发＆安培;在使用该框架的一般反馈 [英] Backbone events not firing & general feedback on use of the framework

查看：67
本文介绍了骨干事件不触发＆安培;在使用该框架的一般反馈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我很新的Backbone.js的，我挣扎了一点。我想出了一个办法，从成功到屏幕上的服务器（在JSON）得到的数据，但我在做它的正确/最好的方法？

我所有的观点都this.el确定，但意见的事件不会触发（）...什么是最好的方式前进？

下面是code：

  VAR surveyUrl =/ API /调查方式= JSON和放大器;？回调=;AnswerOption = Backbone.Model.extend（{}）;AnswerOptionView = Backbone.View.extend（{    初始化：功能（）{
        _.bindAll（这一点，updateCheckedState'）;
    }，    事件：{
        点击.answerOptionControl：updateCheckedState//仍然诺伊射击:-(
    }，    渲染：功能（）{
        this.model.get（'answerOption'）questionChoiceType = this.model.get（'questionChoiceType'）;
        变种模板= _.template（$（＃questionAnswerOptionTemplate）的HTML（），this.model.get（'answerOption'））;        $（this.el）的.html（模板）;
        返回此;
    }，    updateCheckedState：功能（E）{
        警报（这是我的事件起源：+ e.target）
    }
}）;质询= Backbone.Model.extend（{}）;QuestionView = Backbone.View.extend（{
    渲染：功能（）{        VAR模板= _.template（$（＃questionTemplate）HTML（），this.model.get（'问题'））;
        $（this.el）的.html（模板）;        / *验证code删除* /        对于（VAR I = 0; I＆LT; this.model.get（'问题'）answerOptions.length;我++）{
            VAR QMODEL =新AnswerOption（{
                answerOption：this.model.get（'问题'）answerOptions [I]
            }）;            VAR视图=新AnswerOptionView（{模式：QMODEL}）;            这个$（​​'字段集'）追加（view.render（）el.innerHTML）。;
        }        返回此;
    }
}）;调查= Backbone.Model.extend（{
    网址：函数（）{返回this.get（ID）？ surveyUrl +'/'+ this.get（ID）：surveyUrl; }
}）;SurveyList = Backbone.Collection.extend（{
    型号：调查显示，
    网址：surveyUrl
}）;SurveyView = Backbone.View.extend（{
    初始化：功能（）{
        _.bindAll（这一点，'渲染'）;
        this.model.bind（刷新，this.render）;
        this.model.bind（'变'，this.render）;
    }，    //重新渲染的内容
    渲染：功能（）{
        对于（VAR I = 0; I＆LT; this.model.attributes [0] .questions.length;我++）{            VAR视图=新QuestionView（）;
            VAR QMODEL =新课题（{
                问题：this.model.attributes [0] .questions [I]
            }）;            view.model = QMODEL;
            $（this.el）.append（view.render（）el.innerHTML）;
        }        this.el.trigger（'创建'）;
    }
}）;$（文件）。就绪（
功能（）{
    aSurvey =新的调查（{ID：1}）;
    window.App =新SurveyView（{模式：aSurvey，EL：$（＃问题）}）;
    aSurvey.fetch（）;
}）;

-html 

 ＆LT;身体GT;
    ＆LT; D​​IV ID =问题＆GT;＆LT; / DIV＆GT;
    ＆LT;！ - 模板 - ＆GT;
    ＆LT;脚本类型=文/模板ID =questionAnswerOptionTemplate＆GT;
        ＆LT;输入名称=answerOptionGroup＆LT;％= questionId％GT; ID =answerOptionInput＆LT;％= ID％GT;类型=复选框级=answerOptionControl/＆GT;
        ＆LT;标签=answerOptionInput＆LT;％= ID％GT;＆GT;＆LT;％=文本％GT;＆LT; /标签＆gt;
    ＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/模板ID =questionTemplate＆GT;
        ＆LT; D​​IV ID =问题＆LT;％= ID％GT;类=questionWithCurve＆GT;
            ＆所述; H1＆GT;＆下;％= HEADERTEXT％GT;＆下; / H1＆GT;
            ＆所述; H2＆GT;＆下;％=潜台词％GT;＆下; / H2＆GT;
            ＆LT; D​​IV数据角色=fieldcontainID =answerOptions＆LT;％= ID％GT; ＆GT;
                ＆LT;字段集数据角色=controlgroup数据类型=垂直＆GT;
                    ＆LT;传奇＆GT; ＆LT; /传说＆GT;
                ＆LT; /字段集＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;

和来自服务器的JSON：

 ？ （{
    名：调查，
    问题：[{
        surveyId：1，
        HEADERTEXT：问题1
        潜台词：潜台词，
        类型：选择，
        positionOrder：1，
        answerOptions：[{
            questionId：1，
            文：问题1  - 选项1
            positionOrder：1，
            标识：1，
            createdOn：\\ /日期（1333666034297 + 0100）\\ /
        }，{
            questionId：1，
            文：问题1  - 选项2
            positionOrder：2，
            ID：2，
            createdOn：\\ /日期（1333666034340 + 0100）\\ /
        }，{
            questionId：1，
            文：问题1  - 选项3
            positionOrder：3，
            ID：3，
            createdOn：\\ /日期（1333666034350 + 0100）\\ /
        }]，
        questionValidators：[{
            questionId：1，
            值：3
            类型：MaxAnswers​​，
            标识：1，
            createdOn：\\ /日期（1333666034267 + 0100）\\ /
        }，{
            questionId：1，
            值：1
            类型：MinAnswers​​，
            ID：2，
            createdOn：\\ /日期（1333666034283 + 0100）\\ /
        }]，
        标识：1，
        createdOn：\\ /日期（1333666034257 + 0100）\\ /
    }，{
        surveyId：1，
        HEADERTEXT：问2
        潜台词：潜台词，
        类型：选择，
        positionOrder：2，
        answerOptions：[{
            questionId：2，
            文：问题2  - 选项1
            positionOrder：1，
            ID：4，
            createdOn：\\ /日期（1333666034427 + 0100）\\ /
        }，{
            questionId：2，
            文：问题2  - 选项2
            positionOrder：2，
            ID：5，
            createdOn：\\ /日期（1333666034440 + 0100）\\ /
        }，{
            questionId：2，
            文：问题2  - 选项3
            positionOrder：3，
            ID：6，
            createdOn：\\ /日期（1333666034447 + 0100）\\ /
        }]，
        questionValidators：[{
            questionId：2，
            值：3
            类型：MaxAnswers​​，
            ID：3，
            createdOn：\\ /日期（1333666034407 + 0100）\\ /
        }，{
            questionId：2，
            值：1
            类型：MinAnswers​​，
            ID：4，
            createdOn：\\ /日期（1333666034417 + 0100）\\ /
        }]，
        ID：2，
        createdOn：\\ /日期（1333666034377 + 0100）\\ /
    }，{
        surveyId：1，
        HEADERTEXT：问题3
        潜台词：潜台词，
        类型：选择，
        positionOrder：3，
        answerOptions：[{
            questionId：3，
            文：问题3  - 选项1
            positionOrder：1，
            ID：7，
            createdOn：\\ /日期（1333666034477 + 0100）\\ /
        }，{
            questionId：3，
            文：问题3  - 选项2
            positionOrder：2，
            ID：8，
            createdOn：\\ /日期（1333666034483 + 0100）\\ /
        }，{
            questionId：3，
            文：问题3  - 选项3
            positionOrder：3，
            ID：9，
            createdOn：\\ /日期（1333666034487 + 0100）\\ /
        }]，
        questionValidators：[{
            questionId：3，
            值：3
            类型：MaxAnswers​​，
            ID：5，
            createdOn：\\ /日期（1333666034463 + 0100）\\ /
        }，{
            questionId：3，
            值：1
            类型：MinAnswers​​，
            ID：6，
            createdOn：\\ /日期（1333666034470 + 0100）\\ /
        }]，
        ID：3，
        createdOn：\\ /日期（1333666034457 + 0100）\\ /
    }，{
        surveyId：1，
        HEADERTEXT：问题4，
        潜台词：潜台词，
        类型：选择，
        positionOrder：4，
        answerOptions：[{
            questionId：4，
            文：问题4  - 选项1
            positionOrder：1，
            ID：10，
            createdOn：\\ /日期（1333666034500 + 0100）\\ /
        }，{
            questionId：4，
            文：问题4  - 选项2
            positionOrder：2，
            ID：11，
            createdOn：\\ /日期（1333666034507 + 0100）\\ /
        }，{
            questionId：4，
            文：问题4  - 选项3
            positionOrder：3，
            ID：12，
            createdOn：\\ /日期（1333666034507 + 0100）\\ /
        }]，
        questionValidators：[{
            questionId：4，
            值：3
            类型：MaxAnswers​​，
            ID：7，
            createdOn：\\ /日期（1333666034493 + 0100）\\ /
        }，{
            questionId：4，
            值：1
            类型：MinAnswers​​，
            ID：8，
            createdOn：\\ /日期（1333666034497 + 0100）\\ /
        }]，
        ID：4，
        createdOn：\\ /日期（1333666034490 + 0100）\\ /
    }]，
    标识：1，
    createdOn：\\ /日期（1333666034243 + 0100）\\ /
}）


解决方案

它不会因为你是如何追加子视图工作

 这$（'字段集'）追加（view.render（）el.innerHTML）。;

的事件处理中Backbone.Views作品的方式是，而不是被连接到元件事件附着到视图的根元素，然后将它们委派给孩子元素。在你的情况，而不是子视图的根元素追加到父视图，你追加的内容突破了事件处理为您绑定的事件它从不给DOM。元素

 这$（'字段集'）追加（view.render（）EL）。;

删除的innerHTML 属性，它会重新工作。如果你不想实例Backbone.Views时有包装元素，您可以随时传递给被声明为报选项属性。

元素

  VAR视图=新AnswerOptionView（{。型号：QMODEL，EL：此$（'字段集'）}）渲​​染（）;

这样的AnswerOptinView将声明fieldset元素，将事件绑定到它。

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?

All my view have this.el set but the events of the views are not firing ()... What is the best way forward?

Here is the code:

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>

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)\/"
})

解决方案

It doesn't work because of how you append the subview

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

The way the events handling works in Backbone.Views is that events rather then being attached to elements are attached to the root element of the view and then they are delegated to the children elements. In your case instead of appending the root element of the subview to the parent view you append its contents breaking the event handling as the element to which you bind events never makes it to the DOM.

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

remove the innerHTML property and it will work again. If you dont want to have wrapping element when instantiating Backbone.Views you can always pass element to be claimed as el options property.

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

this way the AnswerOptinView will claim the fieldset element and will bind the events to it.

这篇关于骨干事件不触发＆安培;在使用该框架的一般反馈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆