Ember.js: ์ž‘์—…์ด ์ฒจ๋ถ€๋œ ์š”์†Œ์— ํฌํ•จ๋œ ๊ฒฝ์šฐ ํ™•์ธ๋ž€์„ ํด๋ฆญํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

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

๊ฐ„๋‹จํ•œ ์˜ˆ,

๊ทธ ์•ˆ์— ํฌํ•จ๋œ type="checkbox"์˜ ์ž…๋ ฅ ํƒœ๊ทธ์™€ ํ•จ๊ป˜. ํ™•์ธ๋ž€์€ ์˜ˆ์ƒ๋Œ€๋กœ ํด๋ฆญํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ํฌํ•จํ•˜๋Š” div์— ์ž‘์—…์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์žก์•„๋ผ... ํ™•์ธ๋ž€์€ ์ด์ œ ํด๋ฆญํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. '๋ณ€๊ฒฝ' ์ด๋ฒคํŠธ๋ฅผ ํฌ์ฐฉํ•˜์—ฌ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•˜๋ ค๊ณ  ์‹œ๋„ํ•˜์ง€๋งŒ ๋งค๋ฒˆ ์ดํ›„์— ๋˜๋Œ๋ฆฌ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ์ปคํ”Œ ๋ฐ”์ด์˜ฌ๋ฆฐ:

์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค....
http://jsfiddle.net/yp128r1e/

ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค...
http://jsfiddle.net/yp128r1e/1/

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

๊ธฐ๋ณธ์ ์œผ๋กœ ์ž‘์—… ๋„์šฐ๋ฏธ๋Š” ๊ธฐ๋ณธ ์ž‘์—…์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ํ™•์ธ๋ž€์ด ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋„์šฐ๋ฏธ์— preventsDefault=false ๋ฅผ ์„ค์ •ํ•˜์—ฌ ์ด๋ฅผ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://jsfiddle.net/yp128r1e/3/์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค

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

@hilem ์ด๊ฒƒ์€ ์‹ค์ œ๋กœ ๋ชจ๋“  ์ด๋ฒคํŠธ ์œ ํ˜•์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ํŠนํžˆ ํด๋ฆญ ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. Ember๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ™•์ธ๋ž€์˜ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์•„์•ผ ํ•จ์„ ์˜๋ฏธํ•˜๋Š” ๊ธฐ๋ณธ ์ด๋ฒคํŠธ ๋™์ž‘์„ ๋ฐฉ์ง€ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด ๋ฒ„๊ทธ๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š๋Š”๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ์ฒดํฌ๋ฐ•์Šค์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ํ•ญ๋ชฉ๋„ ์ฒ˜๋ฆฌํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ์ž‘์—… ์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@wagenet ์ด๊ฒƒ์€ ๋งค์šฐ ์ผ๋ฐ˜์ ์ธ ๋””์ž์ธ ํŒจํ„ด์ž…๋‹ˆ๋‹ค. ํ–‰์˜ ํ™•์ธ๋ž€์ด ์•„๋‹Œ ํ–‰์„ ์„ ํƒํ•˜๊ธฐ ์œ„ํ•ด ํ–‰์˜ ์•„๋ฌด ๊ณณ์ด๋‚˜ ํด๋ฆญํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ™•์ธ๋ž€์€ ์ˆœ์ „ํžˆ ์„ ํƒ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ๊ณผ ์ ‘๊ทผ์„ฑ์„ ๊ฐ•ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ์ถ”๊ฐ€๋˜์—ˆ์œผ๋ฉฐ, ๋‹น์‹ ์ด ๋งํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ™•์ธ๋ž€์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ด๋ฏธ์ง€ ๋“ฑ์œผ๋กœ ๊ฐ€์งœ ํ™•์ธ๋ž€์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์ฒ˜๋ฆฌํ•  ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๊ดœ์ฐฎ์„ ์ ‘๊ทผ์„ฑ ํ…Œ์ŠคํŠธ์— ๋งŽ์€ ๋ถ€๋‹ด์„ ์ค๋‹ˆ๋‹ค. Btw, ์ด๊ฒƒ์€ ๋‹ค๋ฅธ ์–‘์‹ ์š”์†Œ์™€ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค. ์ด ๋™์ž‘์€ ํ™•์ธ๋ž€์—์„œ๋งŒ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ๊ฐ€ ํ˜„์žฌ ๊ตฌ์กฐํ™”๋œ ๋ฐฉ์‹์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— Ember๋Š” ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ž ์‹œ ์–ธ๊ธ‰ํ•  ํ•„์š”๊ฐ€ ์žˆ์ง€๋งŒ ์ด๊ฒƒ์ด ๋ฒ„๊ทธ๊ฐ€ ์•„๋‹ˆ๋ผ๊ณ  ์ฃผ์žฅํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ์ž‘์—… ๋„์šฐ๋ฏธ๋Š” ๊ธฐ๋ณธ ์ž‘์—…์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ํ™•์ธ๋ž€์ด ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋„์šฐ๋ฏธ์— preventsDefault=false ๋ฅผ ์„ค์ •ํ•˜์—ฌ ์ด๋ฅผ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://jsfiddle.net/yp128r1e/3/์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค

@wagenet ๊ฐ์‚ฌ

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