๋ค์๊ณผ ๊ฐ์ด ๊ตฌ์ฑ ์์ ๋์ฐ๋ฏธ์ ํจ๊ป 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
@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 ์ฌ์ฉ์ ๋จ์ ์ด๋ผ๊ณ ๋ฏธ๋ฌํ๊ฒ ์ ์ํฉ๋๋ค. "๊ทธ๋ฅ ์๋"ํ๋ฉด ํ์์ ์ผ ๊ฒ์ ๋๋ค. :)
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฐ๋ผ์ ์๋ฏธ๋
input
๊ตฌ์ฑ ์์์ ์ด๋ฆ์ ๋ฐ๊ฟ์ผ ํ๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ ๋ถ๋ช ํ ๋น์ค์ฉ์ ์ ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ํ์ค ํ์ดํ์ผ๋ก ๋ฌถ์ธ ๋ํผ๋ฅผ ์ฌ์ฉํ ์ ์์ด์ผ ํฉ๋๋ค.๊ตฌ์ฑ ์์ ๋์ฐ๋ฏธ์ ํจ๊ป ํ์ค(๋ด์ฅ) ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ ๋ค์ ์ด์ํ๊ณ ์์์ ์ธ ์ ํ์ฒ๋ผ ๋ณด์ ๋๋ค.