按需加載元素後不會觸發骨幹事件

我在單個頁面應用程序中使用主幹和惰性加載視圖，因爲我需要它們。然而，似乎這樣做似乎混淆了骨幹在設置事件時知道我'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'); 
    } 

}); 
});

任何人都可以看到我錯過了什麼嗎？

來源

2013-03-06 Nidonocu

而不是設置的'el'直接，你應該使用[setElement]（http://backbonejs.org/#查看-setElement）。我不明白這是個問題，但它將事件重新引導到新的DOM元素。 – WiredPrairie 2013-03-06 11:46:57

@WiredPrairie非常感謝！這解決了問題。如果您重新發布您的評論作爲答案，我可以給您投票和接受的答案。 :) – Nidonocu 2013-03-06 12:59:07

無論何時您需要手動更改或修改BackboneJS視圖的DOM元素，都應該使用setElement而不是直接設置該屬性。它將所有事件處理程序移至新添加的DOM元素，並設置$el屬性。另外，該函數還會分離任何現有的事件處理程序。

所以，在你粘貼代碼，你只需將其更改爲：

this.setElement($('#section-editaddress'));

來源

2013-03-06 14:58:32 WiredPrairie

按需加載元素後不會觸發骨幹事件

回答

相關問題