Question

我正在使用骨干开发一个Web应用程序。在我的骨干视图中，我使用的是事件表单提交。首次加载视图时，表单提交即可。但是当我在路由器之间切换然后我提交我的表单时，它会发送多个相同的ajax请求。

我的观点是......

var View_AdvanceSearchArea = Backbone.View.extend({
    el: '.page',
    events: {
        'change #genderID': 'genderChange',
        'change #areaID': 'areaChage',
        'submit #advanceSearchForm': 'formSubmit'
    },
    genderChange: function() {
        $.ajax({
            url: 'getBodyHeightByGender',
            type: 'POST',
            data: '&genderID=' + $('#genderID').val(),
            success: function(res) {
                $('#bodyHeightID').html(res);
            }
        });
        $.ajax({
            url: 'getAgeByGender',
            type: 'POST',
            data: '&genderID=' + $('#genderID').val(),
            success: function(res) {
                $('#seventhDigitID').html(res);
            }
        });
    },
    areaChage: function() {
        $.ajax({
            url: 'getSubAreaByArea',
            type: 'POST',
            data: '&areaID=' + $('#areaID').val(),
            success: function(res) {
                $('#subAreaID').html(res);
            }
        });
    },
    formSubmit: function(e) {
        e.preventDefault();
        var formData = $('#advanceSearchForm').serializeArray();
        var vAdvanceSearchResult = new View_AdvanceSearchResult();
        vAdvanceSearchResult.render(formData);
    },
    render: function() {
        var $this = this;
        var mAdvanceSearchForm = new Model_AdvanceSearchForm();
        mAdvanceSearchForm.fetch({
            success: function(res) {
                var template = _.template($('#advance_search_area').html(), {res: res.attributes});
                $this.$el.html(template);
            }
        });
    }
});

有什么问题？任何帮助？

Answer 1

当您调用视图时，每次都会将事件绑定到DOM元素。初始化视图时，您必须从DOM元素中取消该事件。

在您的视图中尝试以下代码..

var View_AdvanceSearchArea = Backbone.View.extend({
    el: '.page',
    initialize: function() {
        $(this.el).undelegate('#advanceSearchForm', 'submit');
        $(this.el).undelegate('#genderID', 'change');
        $(this.el).undelegate('#areaID', 'change');
    },
    //here is your rest of code

希望它对你有用..

Answer 2

Model_AdvanceSearchForm（）是在render（）方法中创建的，当你在路由器中调用render（）时会导致内存泄漏。它也可能是意外行为的原因，因为HTML元素与视图分离，但仍然存在于内存中，因此如果它们绑定到模型，就会以某种方式参与偶数生成。
同样在formSubmit中，您创建了View_AdvanceSearchResult，这也可能导致内存泄漏或意外行为。

有关详细信息，请查看this post或Backbone.js CookBook。

解决方案是在initialize（）方法中创建新对象，而不是render（）或formSubmit（），并且不要忘记在不再需要它们时将它们处理掉。

骨干中的表单提交会触发多个相同的ajax请求？

2 个答案: