I've got a few text-input helper like this
{{input type="text" valueBinding="name" focus-out="focusOutName"}}
I just upgraded Ember to 1.11.0 and now get this deprecation warning:
DEPRECATION: You're attempting to render a view by passing valueBinding to a view helper, but this syntax is deprecated. You should use value=someValue instead.
However when using value it is not bound in the controller and value simply sets the text to whatever value.
How do I correctly bind it?
You should just have to change:
{{input type="text" valueBinding="name" focus-out="focusOutName"}}
to:
{{input type="text" value=name focus-out="focusOutName"}}
or even better (don't need the type="text", it's automatic):
{{input value=model.name focus-out="focusOutName"}}
then next to it you can display the value, and see it change when you change the input (so you can test for yourself that the bindings are set up already):
{{input value=model.name focus-out="focusOutName"}}
{{model.name}}
Related
I'm following the Full Stack Ember with Rails course on Embercasts. As they don't use Octane yet, I change the code where necessary to work with Ember 3.22. I'm stuck in video 22 where I need to pass data to a component. This data should only be passed to the component, but when updating a value inside it, I don't want to see the change in other places.
In the video, this is taken care of in a didReceiveAttrs() handler, but this is not available in Octane. Instead, the Ember docs describe one way data flow as what happens automatically. In my case, it doesn't:
{{! author.edit.hbs !}}
<h3>Editing: {{model.last}}, {{model.first}}</h3>
<AuthorForm #author={{model}} />
{{! author-form.hbs !}}
<div class="field">
<label for="first">First name</label>
<Input #id="first" type="text" placeholder="First name" #value={{this.author.first}}/>
</div>
<div class="field">
<label for="last">Last name</label>
<Input #id="last" type="text" placeholder="Last name" #value={{this.author.last}}/>
</div>
The h3 updates whenever I change the value in one of the component's inputs. What's wrong here?
The <Input> component shipped with Ember.js uses two-way data binding for the value.
Arguments passed to a component are immutable. You can not change this.args nor a value passed with #. But object passed in as values of arguments are not frozen.
Taking this template as an example:
<Input #value={{#post.title}}/>
It will not mutate #post but the title property of the object passed in as #post argument.
I'm wondering how I'd go about dynamically editing a component property from within the component. Code might help you get a bit more clarity on what I'm trying to do.
Templates/boards.hbs
<div>
{{board-component title='Title that wants to be dynamic'}}
</div>
Components/board-component.hbs
{{#if isEditing}}
<div>
<input type="text" value={{title}}>
</div>
{{else}}
<div>
{{title}}
</div>
{{/if}}
Am I right in saying that standard behaviour would have the value I specify in the input reflect as the title, but due to the fact that I've declared the value in the template it reverts back to this declared value?
How can I get around this?
<input type="text" value={{title}}>
It means, board-component title property will get values from boards.hbs. and initially, this will be displayed in the input. but changing input value will not reflect it in title property of the components.
But if you used input helper like below,
{{input type="text" value=title}}
It is two way binding between input value and title property. so whenever you change value from input that will reflect in components.
So answer to your question, use input helper.
{{input type="text" value=title}}
How do you get a checkbox using the {{input}} helper in EmberJs to send an action with multiple parameters?
Here is the current template:
<input
type="checkbox"
class="t-dtd-field-checkbox"
checked="checked"
{{action "updateRequest" option field ticket}}
>
I'd like to do something like this:
{{input
type="checkbox"
class="t-dtd-field-checkbox"
checked={{option.checked}}
{{action "updateRequest" option field ticket}}
}}
However, this is causing a syntax error, and not sure how to get the syntax correct?
Also, how do you get the checkbox's value to update in the DOM on keypress?
Thanks in advance!
Take a look at the documentation here (under actions):
https://guides.emberjs.com/v2.5.0/templates/input-helpers/
You will find your answer here:
https://guides.emberjs.com/v2.5.0/tutorial/autocomplete-component/
{{input
type="checkbox"
class="t-dtd-field-checkbox"
checked=option.checked
on-click=(action "updateRequest" option field ticket)
}}
Hope this helps
I am upgrading from Ember 1.7 to Ember 1.8.0-beta.2 (incremental upgrade, I hope to reach the latest 1.8.0-beta.4 without much trouble).
Apparently, Ember.TextField is deprecated:
DEPRECATION: Resolved the view "Ember.TextField" on the global
context. Pass a view name to be looked up on the container instead,
such as {{view "select"}}.
http://emberjs.com/guides/deprecations#toc_global-lookup-of-views-since-1-8
This is my original implementation:
{{view Ember.TextField classNames="form-control" valueBinding="properties§name" id="name-id" placeholderTranslation="generic.name" required="true"}}
So I have tried with (as I have done with other views):
{{view "textField" ...}}
No luck:
Uncaught Error: Assertion Failed: textField must be a subclass of
Ember.View, not
So, it seems it is now a component. So I try with:
{{input type="text" classNames="form-control" value=properties§name id="name-id" placeholderTranslation="generic.name" required="true"}}
And it seems to work, but I am worried that I am maybe doing something wrong, because neither id nor classNames nor placeholderTranslation are listed as supported properties for the input component.
So here my questions:
am I right in doing this refactoring {{view Ember.TextField}} -> {{input type="text"}}?
what about the properties not explicitly supported? They seem to work in my case. Is this a problem of outdated documentation, or ...
is there a list of generic properties supported by all components? I can not find any.
About your questions on ember here is my answer step by step:
Yes you are doing right refactoring
OLD- {{view Ember.TextField}}
NEW- {{input type="text" value="" name="" class=""}}
"Class" etc properties are anyways supported by html input so when you will add class, placeholder etc things those will be automatically supported as per my understanding
Also all property which are mentioned in Ember Doc other than that whatever is supported in html will always work. You can read the Comment mentioned in ember Ember source-code
{{input type="text" value="111" name="mytest" class="icon" id="wow"}}
AND I got
<input id="wow" class="ember-view ember-text-field icon" type="text"
name="mytest" value="111">
Using ember 1.0 and handlebars 1.0
I want to present an ember input as disabled until the user presses the edit button. I have managed to get the functionality working at the expense of code duplication.
{{#if isEditing}}
{{input type="text" value=firstName class="form-control" placeholder="First name" }}
{{else}}
{{input type="text" value=firstName class="form-control" placeholder="First name" disabled=""}}
{{/if}}
just wondering if there was a better way ..
thanks
Instead of disabled your input with classes, just add the disabled attribute for your input field
{{input type="text" value=firstName class="input-medium" disabledBinding="disabled"}}
Demo Fiddle