[Alloy] 컴포넌트(?) 만들고 삭제하기에 대한 질문드려요!

JavaScript Titanium
1

안녕하세요, 열심히 타이타늄을 습득 중인 디자이너입니다.

@heedoo님, @yomybaby님을 비롯한 많은 감사한 분들 덕분에 비전공자임에도 불구하고
꽤 많은 UI를 구현하는데 성공했습니다. 감사인사 먼저 드려요 --)__)
(질문 폭탄도 죄송스럽게 생각합니다.)

구현 중인 UI 중 꽉 막혀버린 부분이 있어서 질문드려요. 영상 링크
https://www.dropbox.com/s/lrj96rom16q350e/sample.mov?dl=0

이 부분인데요. 카카오톡의 채팅방 만들기 기능이라고 보시면 됩니다.
레이블을 추가하는 기능까지는 구현을 했는데, 각 레이블에 자신을 삭제하는 버튼을 붙이고 싶습니다.
레이블 추가는 아래처럼 구현했습니다.

var tag = new Array();
var tagBtn = new Array();
var i = 0;
function createTag(e){
	tag[i] = Ti.UI.createLabel({
		index:i,left:14, top:7, height:23,borderRadius:5,
		color:'#fff', backgroundColor:'#926BA5', borderColor:'#fff',
		font:{fontFamily:'Appli SD Gothic Neo', fontWeight:'Bold', fontSize:14},
		text: '  '+e+'    '
	});
	tagBtn[i] = Ti.UI.createButton({
		width:23, height:23, color:'#fff', title:'X'
	});
	tagBtn[i].addEventListener('click', function(){
		$.tagArea.remove(tag[i]);
	});
	tag[i].add(tagBtn[i]);
	$.tagArea.add(tag[i]);
	i++;
};

레이블 생성까지는 되는데, 이벤트 리스너가 붙지를 않네요…ㅠㅠ
눌러봐도 콘솔에서 별다른 메시지가 출력이 되지 않습니다.

어떻게 구현을 해야할까요? 이런 경우에 사용하는 로직만 알려주셔도 큰 도움이 될 것 같습니다!

2

앗, 영상 로드가 안되는 것 같네요.
영상 요 링크에서 보실 수 있습니다.!

3

코드가 잘못되었습니다.

click 이벤트 핸들러로 등록된 함수는 맨 위에 있는 i를 실행될때 참조합니다. click 이벤트가 발생할때 이미 i는 다른 숫자가 되어있습니다. 0번째 태그지만 핸들러 실행될때 i는 1입니다.

비슷한 오류를 범한 질문이 있었습니다. 아래는 해당 글에 제가단 답변입니다. 링크 따라 가서 한번 살펴보세요.

1개의 좋아요
4

그렇게 생각 마세요. :slight_smile: 단, 질문 내용이 해결되었을 때 해결 여부와 해결방법등을 잊지말고 꼭 공유해주세요.^^ 비슷한 문제를 겪고 있는 분들에게 도움이 되니까요. :wink:

1개의 좋아요
5

안녕하세요 @Kim_Estebans 님.

Alloy의 장점을 살려서 코딩하시는 것도 좋은 방법이라 나눕니다.
지금의 경우처럼 Classic 코드를 쓰셔도 됩니다만 MVC style로 개발하시면 더욱 편리하게 관리가 가능합니다.

firstView와 secondView가 존재한다고 가정하면 이렇습니다.

firstView.js

var data = [{"name": "John"}, {"name": "Smith"}];

for(var i in data){
    var secondView = Alloy.createController('secondView', {
         name : data[i].name, //<-- value를 passing
   }).getView();
    $.firstView.add(secondView) //<-- firstView  tss에 view의 layout horizontal로 적용
}

secondView.js

var args = arguments[0] || {};
//label 이 존재할때
$.label.text = args.name;

$.label.addEventListener('click', function(e){
    //remove label or do something!
    // 여기에 부모인 firstView의 function을 실행시키셔도 되겠지요.
});

이렇게 Alloy의 장점을 살리셔서 개발하시면 나중에 코드를 보기도 관리하기도 편해요 :smile:
그리고 @codejong 님 말씀처럼 해결방법도 공유해 주시면 다른 분들에게 큰 도음이 될 뿐더러 개발과 나눔에 좋은 문화를 정착하는데 기여 하시게 된답니다.

1개의 좋아요
6

역시 두 분께서 하해와 같은 정보나눔을… 감사합니다.
우선 모델부터 구현을 한 후에 적용을 해봐야겠어요.

성공한 후에, 꼭 다시 해결책을 나눔하러 오겠습니다.
감사합니다.