3

我正在使用主干开发网络应用程序。在我的主干视图中，我正在使用事件表单提交。首次加载视图时，表单提交就可以了。但是当我在路由器之间切换然后我提交我的表单时，它会发送多个相同的 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);
            }
        });
    }
});

问题是什么？有什么帮助吗？

4

2 回答 2

2

当您调用视图时，它的事件每次都绑定到 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

希望它对你有用..

于 2013-09-03T18:46:14.430 回答
0
  1. Model_AdvanceSearchForm() 是在 render() 方法中创建的，当您在路由器中调用 render() 时会导致内存泄漏。这也可能是意外行为的原因，因为 HTML 元素从视图中分离出来，但仍存在于内存中，因此如果它们绑定到模型，则以某种方式参与偶数生成。
  2. 同样在 formSubmit 中，您创建 View_AdvanceSearchResult 也可能导致内存泄漏或意外行为。

有关更多信息，请查看这篇文章或Backbone.js CookBook。

解决方案是在 initialize() 方法中创建只需要一次的新对象，而不是 render() 或 formSubmit()，并且不要忘记在不再需要它们时释放它们。

于 2013-08-30T17:08:38.557 回答