按需加载元素后不会触发骨干事件

我在单个页面应用程序中使用主干和惰性加载视图，因为我需要它们。然而，似乎这样做似乎混淆了骨干在设置事件时知道我'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

按需加载元素后不会触发骨干事件

回答

相关问题