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 に答える