여러보기 인스턴스의 코드가 충돌을 일으킬 수 있습니다.

Question

웹 서비스를 Backbone이있는 단일 페이지 웹 응용 프로그램으로 이식하고 있습니다. 헤더에는 기본 레이아웃이 있으며, 빈 곳은 div#content이고 뷰와 꼬리말을 첨부합니다.

모든 경로는 해당보기를 만들고 이전에 렌더링 된보기를 새로운 것으로 대체하는 div#content에 연결합니다.

require.js을 사용하여 백본 앱을로드하고 있으며 종속성이 있습니다. 모든 백본 코드는 상당히 작습니다. 라우터와보기 만 사용하기 때문에 하나의 파일입니다. 이 AMD 모듈은보기에서 사용되는 파일 내보내기 기능 util.js에 따라 다릅니다. 보기를 작성하고 렌더링 한 후 util.js에서 필요한 유틸리티 (jquery stuff, ajax 등)를 실행합니다.

보기를 렌더링 할 때 유틸리티가 호출되고 다른 경로로 이동하여 새보기가 만들어지면 새보기의 유틸리티가 호출되지만 이전보기의 유틸리티는 여전히 실행 중입니다. .

언젠가는 5 개의보기와 같은 유틸리티를 사용하여 때때로 충돌이 발생합니다.

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; 
... 

Answer 1

내가 앱 어딘가에 현재 활성화 된 뷰에 대한 참조를 저장해야한다고 제안했다.

는 현재 새보기 작성 :

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

을하지만 나중에이 변수에 액세스 할 수 없습니다. 그래서 그것은 존재하지만 당신은 그것을 멈추거나 지우거나 삭제할 수 없습니다.

우리가 일반적으로하는 일은 전체 앱을 초기화하고 모든 것을 관리하는 상위 응용 프로그램 클래스를 만드는 것입니다. requirejs에있는 모든 모듈은 그것에 종속됩니다. 새로운 경로가 탐색 중일 때 부모 App 클래스에게보기를 변경하도록 요청합니다. 이전보기를 삭제하고 새보기를 작성한 다음 div # 컨텐츠를 채운 다음 참조를 저장합니다.

이전보기를 삭제하면 모든 유틸리티가 응답을 멈 춥니 다.

이벤트가 여전히 호출되는 경우에는 뷰 참조를 삭제하기 전에 stopListening 이벤트 바인더를 사용해야 할 수 있습니다.