導致衝突的多個視圖實例中的代碼

我正在使用Backbone將Web服務移植到單頁web應用程序中。有一個基本的佈局，包括一個標題，一個空的div#content，我附加的意見和頁腳。導致衝突的多個視圖實例中的代碼

每條路線都會創建相應的視圖並將其附加到div#content，替換之前用新視圖呈現的視圖。

我正在使用require.js加載主幹應用及其依賴關係。所有Backbone代碼都很小，只有一個文件，因爲我只使用路由器和視圖。此AMD模塊取決於在視圖中使用的util.js文件導出功能。視圖被創建並呈現後，它會執行它需要的實用程序（jQuery的東西，ajax等），從util.js。

問題是，當我渲染視圖時，它會調用實用程序，當我導航到另一條路線並創建一個新視圖時，現在會調用新視圖的實用程序，但舊視圖的實用程序仍在運行。

在某些時候，我有來自五個視圖的實用程序完全運行，有時會導致衝突。

它比我的方法明確的不夠好，我應該有辦法stop/start公用事業充當某種服務。

我會貼上相關的代碼，顯示我目前的做法：

require(["utilities"], function(util) { 
... 
Application.view.template = Backbone.View.extend({ 
    el: "div#content", 
    initialize: function(){ 
    this.render(); 
    }, 
    render: function(){ 
    var that = this; 
    // ajax request to html 
    getTemplate(this.options.template, { 
     success: function(template) { 
     var parsedTemplate = _.template(template, that.options.templateOptions || {}); 
     that.$el.html(parsedTemplate); 
     // execute corresponding utilities 
     if(that.options.onReady) { 
      that.options.onReady(); 
     } 
     }, 
     error: function(template) { 
     that.$el.html(template); 
     } 
    }) 
    } 
}); 
... 
Application.router.on('route:requestPayment', function(actions) { 
    var params = { template: 'request-payment', onReady: util.requestPayment }; 
    var view = new Application.view.template(params); 
});  
... 

});

util.requestPayment由具有使模板工作所需要的所有東西的函數。

我很困惑應該如何處理這個問題。我希望我很清楚，任何建議或幫助將不勝感激。

編輯：utilities.js片段：

...

var textareaCounter = function() { 
    $('#requestMessage').bind('input propertychange', function() { 
    var textarea_length = 40 - $(this).val().length; 
    if(textarea_length === 40 || textarea_length < 0) { 
     $('#message-counter').addClass('error').removeClass('valid'); 
     $("#submitForm").attr('disabled', 'disabled'); 
    } 
    else if(textarea_length < 40 && textarea_length > 0) { 
     $('#message-counter').removeClass('error'); 
     $("#submitForm").removeAttr('disabled'); 
    } 
    $('#message-counter').text(textarea_length); 
    }); 
} 
...  
var utilities = utilities || {}; 
... 
utilities.requestPayment = function() {  
    textareaCounter(); 
    initForm(); 
    preventCatching(); 
    requestPaymentCalcFallback(); 
}; 
... 
return utilities; 
...

來源

2013-02-25 jviotti

你爲什麼從initialize（）裏面調用.render（）？您能否發佈utilities.js文件的片段，它有什麼作用？ – mamoo 2013-02-25 07:05:01

@mamoo避免必須從另一行渲染它們。 – jviotti 2013-02-25 07:06:14

@mamoo，utilities.requestPayment它就是模塊公開的內容。我只複製了一個功能的定義。其他的是類似的，只是jQuery的東西和一些AJAX輪詢 – jviotti 2013-02-25 07:12:18

我建議你應該參考的地方在您的應用程序存儲到當前活動視圖。

您在這裏創建一個新的觀點：

var view = new Application.view.template(params);

，但你必須給這個變量沒有訪問之後。所以它存在，但你不能停止/刪除/擺脫它。

我們通常會做的是有一個父應用程序類來初始化整個應用程序並管理一切。您的requirejs中的每個模塊都將依賴於它。當新航線正在導航時，您可以要求父應用程序類更改視圖。它將刪除舊視圖，創建一個新視圖，填充div＃內容，然後存儲它的引用。

我想當你刪除舊的視圖時，所有的實用程序將停止響應它。

如果你仍然有被稱爲事件的問題，那麼你可能需要刪除的視圖引用之前使用stopListening事件粘合劑。

來源

2013-02-25 08:33:17 neebz

是的，[殭屍意見]（http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone -應用/） – steveax 2013-02-25 17:10:51

導致衝突的多個視圖實例中的代碼

回答

相關問題