I face PlaceHolder problem

1

=>my template login.hbs {{page-title “Login”}}

{{outlet}} =>my controller login.js import Controller from '@ember/controller'; export default class LoginController extends Controller { inputBoxes=["UserName","password"]; }

Here i have used a Component called form.hbs which is below

{{#each @inputBoxes as |inputbox|}} {{inputbox}}:{{input type="text" placeholder=inputbox}}
{{/each}} {{@button}}

I tried to use value attribute which works fine perfectly inserted into my input box But Placeholder attribute is not working.

2

I find one Solution

instead of {{input}} helper i used ‘< input >’

{{#each @inputBoxes as |inputbox|}}

{{inputbox}}:< input type=“text” class=“inputBox” autocomplete=“on” placeholder=inputbox autofocus=“autofocus”>
{{/each}}

it worked but now i want to KNOW how it work with ‘< input>’ but not with {{input}}:man_facepalming:

3

What version of Ember are you using? In any version past ~3.12 you should use <Input …> (notice the capital “I”). This is Ember’s wrapped input component. You can also do what you did and use the native html input tag. Rendering with curlies e.g. {{input …}} is deprecated and is not recommended anymore. It might not even work in newer Ember versions but I’m not 100% on that.

1 Like
4

Thanks @dknutsen for your reply. I am using Ember 5.9. <Input …> component is working fine but {{input …}} isn’t.

5

That’s great that you are using a modern version of Ember. In that case you should absolutely not use curly component invocation (e.g. the {{input ...}} version. Even if it’s still supported at all in 5.9 it is old style and has been deprecated for a long time. But it doesn’t sound like it is working properly anyway.

So as a general rule of thumb:

NEVER use curly syntax:

{{input
  id="input-name"
  disabled=this.isReadOnly
  maxlength="50"
  value=this.value
}}

ALWAYS use either <Input ... > or native <input ... >

{{! Ember's Input component which wraps native input }}
<Input
  id="input-name"
  disabled={{this.isReadOnly}}
  maxlength="50"
  @value={{this.value}}
/>

{{! native input }}
<input
  id="input-name"
  disabled={{this.isReadOnly}}
  maxlength="50"
  @value={{this.value}}
  {{on "input" this.setValue}}
/>

The primary difference between the two being that Ember’s Input component is two-way bound, meaning that it will always update the bound value for you. The native version is one-way bound so you manually manage the bound value. I generally prefer the native version but if you don’t want or need that level of control then the Ember component version is just fine.

2 Likes