I want to perform some action when the user has lost focus from the input fields.
The focus-out property works well for the input fields but has no effect on the select input.
{{view "select" class="form-control"
content=options
optionValuePath="content.id"
optionLabelPath="content.value"
selection= value
focus-out=submitAction}}
How can I get the focus out event for select inputs?
Related
I have a sidebar which holds dynamically loaded components. Every dynamically loaded component has a 'widget' object associated with it so that I can pass relevant data to a component. On one particular component I want to display a sorted radio list of price's. This can be achieved in the component.js file with:
priceDescSort: ['value'],
pricesDescending: Ember.computed.sort('widget.otherModels.product.prices', 'priceDescSort')
The hbs file then has
{{#each pricesDescending as |price id|}}
<div class="radio">
<label>
<input type="radio" name="prices" value="{{price.id}}" {{action 'priceRadioChange' price on='change'}}>
{{currency-formatter price.value}} {{price.account.name}}
</label>
</div>
{{/each}}
On first load of the component I then want the first radio button selected, i.e. the lowest price. So I tried
Ember.run(function() {
self.$('input:radio[name=prices]:first').attr('checked', 'checked');
});
In the didInsertElement hook of the component, however the problem I have is that the second radio list ends up being selected. From what I can tell the computed.sort property is still doing it's work when the first radio is selected and then when it's finished sorting this radio becomes the second one.
So I need to wait for my sort to finish before selecting the first radio button, how can I do this in a dynamically loaded component? It needs to happen one time and not everytime the prices array changes.
How to force to re-render a custom textfield view?
I create a:
App.Select2View = Ember.TextField.extend({didInsertElement:function() {//plugin called here}});
It's included in a template form and when the form is open and I select another/different item, this custom textfield view (based on select 2) doesn't re-render but stays the same.
I have nested routes/resources. Company under companies. When I select a company I have readonly info and edit button that if clicked calls action on the Company controller to "isEditing" state, in this state a form is open. If I change the state to false it goes back into read only model (viewing the company info).
It's fine if I set it back to read only mode first, and then open another item and the select2 is rendered with this companies data.
But if it's in the isEditing state, with form open and I navigate to another company item all form input fields change according to model (such as name will change because it's binded to the name key value of the company model), but the select2 stays the same as previous.
I'm not sure how to re-render this in Ember.
This is defined as partial in template under the main company template view:
<script type="text/x-handlebars" id="company/_edit">
<p>{{input type="text" value=name}}</p>
<p>
{{view "select2"
prompt="Search for companies"
resource="results"
displayKey="text"
onSelect="addCompany"
onDeSelect="removeCompany"
}}
</p>
</script>
Any pointers are appreciated.
I'm new to Ember and my answer might not be apt, but based on my experiments the problem is that Ember caches as much as possible. So it won't re-render the view completely with the select2, only when view is in a certain state previous state followed by next state will it automatically re-render.
The solution atleast for now seems to be to add a "valueChange" method with observer on "value" change on the select2 custom TextField and make the same call as in "didInsertElement" (which executes when the view is rendered):
valueChange: function() {
Ember.run.scheduleOnce('afterRender', this, 'setupSelect2');
}.observes('value'),
Now even if I'm in the "edit" state, it will update this select2 as well, not just the standard form inputs tied specifically to the model. I can now navigate to any item in "edit" state which has form open for each item selected and values change correspondingly in the select2.
On the handlebars template, I'd like to pre-populate an input field with the value. That I can do by putting value=object.property. Then the user should update the value, and when they click the button activating the action, the value should submit to the Component.
The problem is that no value is getting submitted, not the pre-populated value, or the new value. When I console.log what is getting submitted to the component, the input from the text field is "undefined" and the input from the number field is "NaN".
This is my handlebars template:
{{input type="text" value=object.name valueBinding='newName'}}
{{view App.NumberField min='1' value=object.count valueBinding='newCount'}}
<button {{action updateObjectDetails object}}>Save</button>
The related component it is submitting to:
App.ObjectsDetailsComponent = Ember.Component.extend({
actions: {
updateObjectDetails: function(object){
object.set("name", this.get('newName'))
object.set("party_size", parseInt(this.get('newCount')))
object.save();
}
}
});
Is there a way to populate the input field with the correct value AND have it submit with the action?
Ah, got it. The thing is to not try to use the valueBindings, like you might when creating a new object, but to use the actual value, because the actual value is changing. So in the component, it's object.get('name'), not this.get('newName').
Therefore the handlebars should be like this:
{{input type="text" value=object.name}}
{{view App.NumberField min='1' value=object.count}}
<button {{action updateObjectDetails object}}>Save</button>
And the component like this:
App.ObjectsDetailsComponent = Ember.Component.extend({
actions: {
updateObjectDetails: function(object){
object.set("name", object.get('name'))
object.set("party_size", parseInt(object.get('count')))
object.save();
}
}
});
I have this jsbin : http://jsbin.com/IYUSiLUz/1/edit
in here you can select a value in the select, and it shows the selected value in the form. You can also set the default value, and that selection will be highlighted by default in the select.
How can I achieve the same result for a multiple select ? If you change multiple=true, what do you need to change to highlight two items (for example) in the select, and how do you get the selected values ?
thanks
Use the selection property of Ember.Select to get a list of all the selected objects:
{{view Ember.Select
contentBinding="App.data"
optionValuePath="content.id"
optionLabelPath="content.personName"
valueBinding="App.demo"
selectionBinding="selected"
multiple=true }}
{{#each selected}}
{{input value=id}}
{{/each}}
Demo: http://jsbin.com/IYUSiLUz/7/edit
Is there anyway for this text input
<input type="text" aria-controls="existing-user-table" placeholder="Search">
to trigger an action on the controller when the user hits enter?
I don't like to enclose it in a form tag or create a button, just that input textfield.
Use the {{input}} helper - if you include an action parameter it will trigger that action on the controller when the user hits enter. So:
{{input action="myAction" aria-controls="existing-user-table" placeholder="Search"}}
The input helper api docs do not mention this capability, but the helper just wraps Ember.TextField
Also it is possible to trigger the action on keyPress instead of enter by specifying the onEvent property:
{{input action="myAction" onEvent="keypress" aria-controls="existing-user-table" placeholder="Search"}}
The input helper has an insert-newline action that will trigger when the user hits the enter key.
{{input type='text' aria-controls='existing-user-table' placeholder='Search' insert-newline='myAction'}}
Text Input Helpers
Insert Newline docs
From Ember v1.13.0 the action on input helper is depricated we should use useenter or key-press instead of action
Refer Ember Docs
{{input value=someValue enter='someAction'}}
this will trigger the mentioned action when the user press enter on the text input