Ember.js: ๊ตฌ์„ฑ ์š”์†Œ ๋„์šฐ๋ฏธ์™€ ํ•จ๊ป˜ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

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

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌ์„ฑ ์š”์†Œ ๋„์šฐ๋ฏธ์™€ ํ•จ๊ป˜ input ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
passedComponent=(component 'input' type="number" value=myValue)

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์–ด์„ค์…˜ ์‹คํŒจ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
Uncaught Error: Assertion Failed: You cannot use 'input' as a component name. Component names must contain a hyphen

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

๋”ฐ๋ผ์„œ ์˜๋ฏธ๋Š” input ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ด๋ฆ„์„ ๋ฐ”๊ฟ”์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋ถ„๋ช…ํžˆ ๋น„์‹ค์šฉ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ํ‘œ์ค€ ํ•˜์ดํ”ˆ์œผ๋กœ ๋ฌถ์ธ ๋ž˜ํผ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ์„ฑ ์š”์†Œ ๋„์šฐ๋ฏธ์™€ ํ•จ๊ป˜ ํ‘œ์ค€(๋‚ด์žฅ) ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์€ ๋‹ค์†Œ ์ด์ƒํ•˜๊ณ  ์ž„์˜์ ์ธ ์ œํ•œ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

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

@stevesims ๋งž์Šต๋‹ˆ๋‹ค. input ๋กœ ํด๋กœ์ € ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์€ ํ˜„์žฌ ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ •๋‹นํ™”๋Š” Glimmer ๊ตฌ์„ฑ ์š”์†Œ์™€ ๋‹ค์†Œ ๊ด€๋ จ์ด ์žˆ์œผ๋ฏ€๋กœ input ๋ผ๋Š” ์ด๋ฆ„์„ ์˜ˆ์•ฝํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋ฒ„๊ทธ๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง€๊ธˆ์€ ๋‹ซ์„ ์˜ˆ์ •์ด์ง€๋งŒ ๋‹ค์‹œ ์—ด์–ด ํ† ๋ก ์„ ๊ณ„์†ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์˜๋ฏธ๋Š” input ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ด๋ฆ„์„ ๋ฐ”๊ฟ”์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋ถ„๋ช…ํžˆ ๋น„์‹ค์šฉ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ํ‘œ์ค€ ํ•˜์ดํ”ˆ์œผ๋กœ ๋ฌถ์ธ ๋ž˜ํผ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ์„ฑ ์š”์†Œ ๋„์šฐ๋ฏธ์™€ ํ•จ๊ป˜ ํ‘œ์ค€(๋‚ด์žฅ) ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์€ ๋‹ค์†Œ ์ด์ƒํ•˜๊ณ  ์ž„์˜์ ์ธ ์ œํ•œ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

{{#if requiresComponentSubstitution}}  

      <!-- requiresComponentSubstitution: is not "input" -->

        {{component inputComponentName
                    id=(concat elementId '-control')
                    class='form-control'
                    type=type
                    name=valuePath
                    placeholder=placeholder
                    value=value
                    input=(action 'onInput')
        }}
    {{else}}
        {{input id=(concat elementId '-control')
                class='form-control'
                type=type
                name=valuePath
                placeholder=placeholder
                value=value
                input=(action 'onInput')
        }}
    {{/if}}

์ €๋Š” ์ด๊ฒƒ์„ ์œ ์šฉํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ์ œ๊ณตํ•˜๊ณ  Ember ์‚ฌ์šฉ์˜ ๋‹จ์ ์ด๋ผ๊ณ  ๋ฏธ๋ฌ˜ํ•˜๊ฒŒ ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค. "๊ทธ๋ƒฅ ์ž‘๋™"ํ•˜๋ฉด ํ™˜์ƒ์ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. :)

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