티타늄에서 이벤트가 올바르게 실행되지 않음

Question

그래서 루프를 사용하여 추가 된 다른보기가 포함 된보기가 있습니다. 문제는 그 각각의보기에 대해 서로 다른 이벤트를 바인드하고 어떤 이유로 모든보기에 마지막 이벤트 만 추가되고있는 것으로 보입니다 (또는 이전 이벤트보다 우선 함).

var stores = ["B", "O", "E", "K", "S", "F"]; 
    for(var i = 0 ; i < 5 ; i++) 
{ 
    var view_b = Titanium.UI.createView 
    ({ 
     backgroundColor:'#92b723', 
     top:0, 
     height:200, 
     width:200, 
     borderRadius: 30 
     // layout:'horizontal' 
    }); 

    // Handle event 
    var params = stores[i]; 
    view_b.addEventListener('click', function(e) { 
      var controller = Alloy.createController("card", params).getView(); 
      controller.open();   
    }); 

    $.carouselView.add(view_b); 

     ... (some other stuff) 
    } 

하면 어떤 일이 발생한다 : 나는 "카드"컨트롤러에서 디버깅 할 때 내 변수 "PARAMS는"항상 문자 "S"왜

코드는 실제로 매우 간단하다, 난 이해가되지 않습니다 어떤보기를 클릭 할 때마다 카드보기로 이동하여 클릭 한 문자를 표시합니다. 코드가 지금은 모든보기를 클릭하여 "S"를 얻습니다.

미리 감사드립니다.

Answer 1

자바 스크립트 범위 혼동의 전형적인 사례. 이벤트 리스너가 참조하는 for-loop 범위가 변경되므로 마지막 이벤트 범위이므로 각 이벤트 리스너에 대한 i은 항상 5이므로 모든 이벤트 리스너에 대해 항상 "S"를 얻습니다.

첫째, for-loops에서 이벤트 리스너를 만드는 것이 좋지 않습니다 (주로이 범위 지정/컨텍스트 때문에),이 기능을 사용하여 함수를 명명 된 함수로 분리 한 다음보기와 함께 params 값을 전달하십시오 . 그렇게하면 자바 스크립트에서 숫자를 처리하는 대신 값이 속한 범위 (보기)를 명시 적으로 정의 할 수 있습니다.

var stores = ["B", "O", "E", "K", "S", "F"]; 

// 1 - Name your event listener function 
// This is a good idea anyway so that you can remove the listener later 
function listener(e) { 
    var controller = Alloy.createController("card", e.source.params).getView(); 
    controller.open(); 
} 

for (var i = 0; i < 5; i++) { 
    var view_b = Titanium.UI.createView({ 
     backgroundColor : '#92b723', 
     top : 0, 
     height : 200, 
     width : 200, 
     borderRadius : 30, 
     // Pass your parameter with the view itself, more explicit 
     params : stores[i] 
    }); 

    view_b.addEventListener('click', listener); 

    $.carouselView.add(view_b); 
} 

Answer 2

루프에서 이벤트 수신기를 제거하고 루프 외부의 함수로 감싸 야합니다. 비슷한 :

function listenerHelper(view, params) { 
view.addEventListener('click',function(e) { 
    var controller = Alloy.createController("card", params).getView(); 
    controller.open(); 
} 
} 

그런 다음 루프에서 해당 함수를 호출하고 올바른 인수를 전달하십시오