0

我根据需要在单页应用程序中使用主干和延迟加载视图。但是，这样做似乎会混淆主干在设置事件时知道我的“el”是什么的方式。使用下面的视图定义，我试图获取在提交按钮单击或输入字段更改时触发的代码，但现在，两者似乎都不起作用。

$(document).ready(function () {

editaddressView = Backbone.View.extend({

    elementReady: false,

    initialize: function () {
        this.model = window.AccountData;

        this.listenTo(this.model, "change", this.render);

        if ($('#section-editaddress').length == 0) {
            // Load UI
            $('#ajax-sections').prepend('<div class="section" id="section-editaddress" style="display: none;"></div>');
        }
        this.el = $('#section-editaddress');
    },

    events: {
        "click #edit-address-submit": "beginSaving",
        "change input": "updateModel",
        "change select": "updateModel"
    },

    render: function () {
        $(this.el).find("[name=address]").val(this.model.get('owner_address1'));

        // ...

        return this;
    },

    switchTo: function () {
        // Set menu state
        $('.js-NavItem').removeClass('active');
        $('#sN-li-personal').addClass('active');

        if (this.options.isPreLoaded)
            this.elementReady = true;

        if (this.elementReady) {
            this.renderSwitch();
        }
        else {
            var model = this;
            $('#section-editaddress').load('/ajax/ui/editaddress', function (response, status, xhr) {
                if (status == "error") {
                    $('#page-progress-container').fadeOut('fast', function () {
                        $('#page-load-error').fadeIn('fast');
                    });
                } else {
                    $('#section-editaddress').find('.routedLink').click(function (e) {
                        window.Router.navigate($(this).attr('href'), true);
                        return false;
                    });
                    model.delegateEvents();
                    model.elementReady = true;
                    model.render(); // First render
                    model.renderSwitch();
                }
            });
        }
    },

    renderSwitch: function () {
        // Abort showing loading progress if possible
        if (window.firstRunComplete) {
            clearTimeout(window.pageHide);
            // Change screen - Fade progress if needed
            $('#page-progress-container').fadeOut('fast', function () {
                $('#page-load-error').fadeOut('fast');
                var sections = $(".section");
                var numSections = sections.length;
                var i = 0;
                sections.hide('drop', { easing: 'easeInCubic', direction: 'left' }, 350, function () {
                    i++;
                    if (i == numSections) {
                        $('#section-editaddress').show('drop', { easing: 'easeInExpo', direction: 'right' }, 350).removeClass('hidden');
                        $.scrollTo($('#contentRegion'), 250, { margin: true });
                    }
                });
            });
        }

        // Switch complete
        window.changingPage = false;
    },

    updateModel: function () {
        var changedItems = {};
        if (this.model.get('csrf') != $(this.el).find("[name=csrf]").val())
            changedItems.csrf = $(this.el).find("[name=csrf]").val();
        // ...
    },

    beginSaving: function () {
        alert('test');
    }

});
});

谁能看到我错过了什么？

4

1 回答 1

1

每当您需要手动更改或修改 BackboneJS 视图的 DOM 元素时，您应该使用setElement而不是直接设置属性。它将所有事件处理程序移动到新附加的 DOM 元素并设置$el属性。此外，该函数还分离任何现有的事件处理程序。

因此，在您粘贴的代码中，您只需将其更改为：

this.setElement($('#section-editaddress'));
于 2013-03-06T14:58:32.867 回答