Ember.js: this.transitionTo๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋ธ ๋กœ๋“œ๋ฅผ ๊ฑด๋„ˆ๋œ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2013๋…„ 12์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: emberjs/ember.js

์ด๊ฒƒ์ด ์˜๋„์ ์ธ ํ–‰๋™์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋™์  ์„ธ๊ทธ๋จผํŠธ๊ฐ€ ์žˆ๋Š” ๊ฒฝ๋กœ์—์„œ transitionTo๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋Œ€์ƒ ๊ฒฝ๋กœ์˜ ๋ชจ๋ธ ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ณธ์งˆ์ ์œผ๋กœ ์ €๋Š” id๊ฐ€ ์žˆ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์—ฌ์ „ํžˆ ์˜ฌ๋ฐ”๋ฅธ ๋ชจ๋ธ์„ ๋กœ๋“œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋ชจ๋ธ์ด ์ œ๋Œ€๋กœ ๋กœ๋“œ๋˜์ง€๋งŒ ์˜ฌ๋ฐ”๋ฅธ URL๋กœ ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜๋ฉด. ์‹œ์—ฐํ•˜๊ธฐ ์œ„ํ•ด ์ฝ”๋“œํŽœ์„ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

http://codepen.io/anon/pen/LsfhB

ํ˜„์žฌ ๋ฒ„์ „์€ "I'm here" ์ฝ˜์†”์—์„œ ๋กœ๊ทธ์•„์›ƒํ•ฉ๋‹ˆ๋‹ค. IndexRoute๋ฅผ ๋ณด๋ฉด ์ฃผ์„ ์ฒ˜๋ฆฌ๋œ ์ „ํ™˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์ด ํ™œ์„ฑํ™”๋˜๋ฉด "I'm here"๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ์ผ์ž…๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ํ™•์ธ ๊ฒฝ๋กœ๋ฅผ ์œ„ํ•ด ๋‚ด ๋ชจ๋ธ์„ ์–ด๋””์— ๋กœ๋“œํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ „ํ™˜์„ this.transitionTo('confirm', 1); ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ์˜ˆ์ƒํ•œ ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

IIRC ์ „์ฒด ๋ชจ๋ธ ๋Œ€์‹  ์ „ํ™˜์— ํ”„๋ฆฌ๋ฏธํ‹ฐ๋ธŒ(๋ฌธ์ž์—ด, ์ˆซ์ž)๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น ID๋ฅผ ํŒŒ์•…ํ•˜๊ณ  ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ model ํ˜ธ์ถœ์— ๋Œ€ํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋นŒ๋“œํ•˜์ง€๋งŒ ๋ณต์žกํ•œ ๊ฒƒ์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ(in ์ด ๊ฒฝ์šฐ ๊ฐ์ฒด) ๊ทธ๋Ÿฌ๋ฉด ๋ชจ๋ธ์„ ์ „๋‹ฌํ•œ ๊ฒƒ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋ฏ€๋กœ ๋ชจ๋ธ ํ›„ํฌ๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

API ๋ฌธ์„œ๋Š” ์ „์ฒด ๋ชจ๋ธ ๋Œ€์‹  ID๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์˜ˆ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://emberjs.com/api/classes/Ember.Route.html#method_transitionTo

๊ทธ๊ฒƒ์ด ์˜๋ฏธ๊ฐ€ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์ „ํ™˜์„ this.transitionTo('confirm', 1); ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ์˜ˆ์ƒํ•œ ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

IIRC ์ „์ฒด ๋ชจ๋ธ ๋Œ€์‹  ์ „ํ™˜์— ํ”„๋ฆฌ๋ฏธํ‹ฐ๋ธŒ(๋ฌธ์ž์—ด, ์ˆซ์ž)๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น ID๋ฅผ ํŒŒ์•…ํ•˜๊ณ  ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ model ํ˜ธ์ถœ์— ๋Œ€ํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋นŒ๋“œํ•˜์ง€๋งŒ ๋ณต์žกํ•œ ๊ฒƒ์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ(in ์ด ๊ฒฝ์šฐ ๊ฐ์ฒด) ๊ทธ๋Ÿฌ๋ฉด ๋ชจ๋ธ์„ ์ „๋‹ฌํ•œ ๊ฒƒ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋ฏ€๋กœ ๋ชจ๋ธ ํ›„ํฌ๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

API ๋ฌธ์„œ๋Š” ์ „์ฒด ๋ชจ๋ธ ๋Œ€์‹  ID๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์˜ˆ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://emberjs.com/api/classes/Ember.Route.html#method_transitionTo

๊ทธ๊ฒƒ์ด ์˜๋ฏธ๊ฐ€ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด์ œ ์ดํ•ด๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ์˜๊ฒฌ์— ๋Œ€ํ•œ ๋‚˜์˜ ์ฒซ ์ง๊ฐ ์งˆ๋ฌธ์€ ์—ฌ๋Ÿฌ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์ „๋‹ฌํ•ฉ๋‹ˆ๊นŒ? ๊ทธ๋Ÿฌ๋‚˜ ๋ณ„๋„์˜ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

this.transitionTo('confirm.url', 1, 'the-slug-I-want');

๊ทธ๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ํ•˜์œ„ ๊ฒฝ๋กœ๊ฐ€ ๋™์  ์„ธ๊ทธ๋จผํŠธ๊ฐ€ ์žˆ๋Š” ๊ฒฝ๋กœ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ:
์˜ˆ
this.route('์กฐ์ง', { ๊ฒฝ๋กœ: '์กฐ์ง/:์กฐ์ง_id' }, function() {
this.route('project', { ๊ฒฝ๋กœ: 'projects/:project_id' }, function() {
this.route('์Šคํฌ๋ฆฐ', { ๊ฒฝ๋กœ: '์Šคํฌ๋ฆฐ/:์Šคํฌ๋ฆฐ ID' });
});
๊ทธ๋ฆฌ๊ณ  ์ €๋Š” ๋‹ค๋ฅธ ๊ฒฝ๋กœ(์˜ˆ: ์ธ์ฆ ๊ฒฝ๋กœ)์— ์žˆ์Šต๋‹ˆ๋‹ค. this.transitionTo('organization.project.screen',
{์กฐ์ง ID: 'grege23-234-4c3e-96fe-234423' },
{ํ”„๋กœ์ ํŠธ ์•„์ด๋””: '234234-23423-4b99-a492-234'},
{ํ™”๋ฉด ์•„์ด๋””: '34534-48f4-471d-ad17-3'45});
๋ชจ๋ธ์ด ๋กœ๋“œ๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ฌด๊ฒƒ๋„ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋‹น์‹ ์€ ์ด๊ฒƒ์„ ์œ„ํ•ด ์–ด๋–ป๊ฒŒ ๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰