[Alloy] 다른 View를 불러오는 방법

JavaScript Titanium
1

안녕하세요, 질문글을 너무 계속적으로 올려 불편하진 않으실까 걱정이네요.
(그치만 답답한 마음에 ㅠㅠㅠ… 죄송합니다.)

현재 index.xml에 네비게이션용 View(nav.xml)를 require해서 불러와두었습니다.
그리고 그리고 nav.xml 내의 버튼을 클릭했을 때 메뉴 화면(menu.xml)을 불러서 index에 추가하고 싶습니다.
단순히 createcontroller.getview하면 될 줄 알았는데, index.js에 없는 기능이라 그런지 찾지를 못하네요.

이런 경우는 어떻게 처리해야 할까요?

2

근본적으로 다른 파일(View, Controller 등)에 접근하는 방법을 모르고 있어서 생기는 문제 같습니다.

예를 들어 html 상에서는, 상위폴더의 경우 …/ 으로 접근하면 되는데,
타이타늄에서는 이런 방법을 모르고 있네요…ㅠㅠ

3

생성한 menu controller를 index의 window나 view에 add해 주면 됩니다.
예) index.js에 window의 id가 win이라고 가정하면 이렇습니다.

//여기서 이미 menu controller 가 생성이 되어지며 아래의 nav 이벤트에서 윈도우에 더해 주게 됩니다.
var menu = Alloy.createController('menu').getView();

$.nav.addEventListener('click', function(){
    $.win.add(menu);
});

만약 menu가 controller의 components folder에 있다고 가정하면

var menu = Alloy.createController('components/menu').getView();

value를 pass하고자 하신다면

var menu = Alloy.createController('components/menu', {
     title : "title",
     data : "data"
}).getView();

//이렇게 되면 menu.js의 args에서 보낸 value들을 확인하실수 있습니다.
//menu.js 예 : var args = arguments[0] || {};
Ti.API.info(JSON.stringify(args));  // <-- args의 return값은 {"title": "title", "data": 
"data"}  가 되겠지요.
2개의 좋아요
4

상세한 답변 감사합니다. 너무 어렵게 생각해서 그랬던 것 같아요.
index에 id를 부여할 생각을 못하고 있었네요 - -;;;
(뭔가 index는 다를 거라는 생각에 그만…)

공식 Q&A에도 물어봤는데, 아이디 부여하고 거기다 add하는 건 알면서,
index에다가 add를 못하고 있는 걸 이해를 못하더라구요ㅎㅎ

정말정말 감사합니다. 꾸벅.

5

@heedoo 혹시 한가지만 더 여쭈어봐도 될까요?

detailView의 컨트롤러에서,
mainView에 있는 'container’라는 ID를 가진 뷰에 접근하려면 어떻게 해야할까요?
그냥 '$.ID’의 형태로 접근하는 건 아닌 것 같던데…

부탁드립니다 :slight_smile:

6

제가 생각하기에 detailView 컨트롤러라면 mainView의 child view라고 생각됩니다만 맞는지 모르겠네요. 맞다면 value를 child view로 보내실 때 $를 보내주시면 됩니다.

예) mainView.js

// $ 를 보낸다는 의미는 parent의 모든 $이 지정된 아이디들을 보낸다는 의미입니다.
// 말씀하신 것처럼 단순히  한 가지 아이디의 값을 보내셔도 되며 아래의 예제처럼 모든 
//값을 보내셔도 됩니다.
Alloy.createController('detailView', { 
    parent : $,  
    title : $.nav.title.text 
}).getView().open();

$.mainValue = "something";

detailView.js(새로 열리는 뷰가 window일 때)

var parent = args.parent;
var title = args.title;  //<--$.nav.title.text 값이 됩니다.
var newValue = parent.mainValue;
Ti.API.info(newValue) //<-- newValue 값은 "something" 이 됩니다.

원하셨던 답인지 모르겠네요.
도움이 되셨으면 좋겠습니다.

2개의 좋아요
7

ㅠㅠㅠ감동적입니다… 드디어 원하는 기능이 되네요!
사실 답변해주신 내용만 봐서는 이해가 가지 않아서 뚝딱거려봤는데, 잘 작동합니다!
아주 큰 줄기를 알게 된 것 같아서 기쁘네요.
초보적인 질문에 매번 상세히 답변해주셔서 감사합니다.

8

잘 작동한다니 다행입니다. :slight_smile:

9

@heedoo
윽… 가급적 혼자 해결해보려 했는데, 염치불구하고 하나만 더 질문드려요.

parent로 $를 보내주는건 단 하나의 컨트롤러에만 가능한가요?
다른 곳에서 $를 받아버리면, 다른 컨트롤러는 받지를 못하네요.
설계 방식이 틀린걸까요 ㅠㅠ

++ 앗. 해결했습니다.
컨트롤러 A가 $를 받아서 컨트롤러 B로 갈때 $를 보내주지 않아서 생긴 문제였네요!
(설명이 모호하지만…)

10

한 가지 Tip을 드리자면 function도 마찬가지로 pass할 수 있습니다.

$.update = function(val){
    alert("updating!")
}

//child view에서는 args.update()  <-- 이렇게 사용 할 수 있겠죠.
Alloy.createController('detail',{ func :$.update}).getView().open();

나중에 다른 분들을 위해서도 value를 pass하는 법을 따로 올릴께요.

2개의 좋아요
11

이런 방식으로도 가능하군요!

저는 function도 위에서 적어주신
$.mainValue = "something"; 과 같은
방식으로 전달하고 있는데, 비권장되는 사용법일까요?

12

같은 방법 같네요. 그리고 function을 보내셔도 또는 string value를 또는 array 나 dictionary를 보내실수도 있어요 :slight_smile: