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
Related
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?
I am dynamically building a number of select controls. I want to know when an option has changed so I am doing the following:
The idea there is that I dynamically create properties on the selections object which is used to hold the selected values.
//Add observer
Ember.defineProperty(selections, camelizedModelClass, null);
selections.addObserver(camelizedModelClass, self, 'selectionChanged');
Here is the function that should be called when selection has changed.
selectionChanged : function(sender, key, value, rev) {
console.log('worked!');
},
In my template I create Ember.Select's as follows.
{{#each control in controls}}
<div {{bind-attr class=":form-group control.width"}}>
<label for="exampleInputPassword1">{{control.label}}</label>
{{view "select"
content=control.content
selection=control.selection
optionValuePath=control.optionValuePath
optionLabelPath=control.optionLabelPath
class = "form-control"
prompt=control.prompt
}}
<p class="help-block"></p>
</div>
{{/each}}
Each control in the controls array has the following property.
selection: 'selections.' + camelizedModelClass,
The observer method is never called, however, if I manually enter the selection as follows it is in fact called.
{{view "select"
content=control.content
selection=selections.manager <-------- manually specifying the selection
optionValuePath=control.optionValuePath
optionLabelPath=control.optionLabelPath
class = "form-control"
prompt=control.prompt
}}
Why is this not working? The other weird thing is that if I put {{control.selection}} in my handlebars template I can see the model changing for the first method but not the second.
Try changing the Ember.SelectView selection property to value.
{{view 'select' value=selections.manager}}
Here is an example.
http://emberjs.jsbin.com/boluba/1/edit
I have an array of items and I want to have a select view for each of the item in the array. I am able to populate the dropdown list, but i am unable to set the default select value for each of the item.
{{#each item in items}}
{{item.item_name}}{{item.user_id}}
{{view Ember.Select
content=controller.users
optionValuePath="content.user_id"
optionLabelpath="content.user_name"
value="item.user_id"}}
{{/each}}
Each item object contains a user_id. I want the select view for each item to be set in accordance to the user_id from each item.
Thanks!
I guess, optionLabelPath was not correct and optionValuePath="content.user_id" should have been optionValuePath="content.id" also the value should be valueBinding.
Something like this:
{{view Ember.Select
contentBinding=controller.users
optionValuePath="content.id"
optionLabelPath="content.user_name"
valueBinding="item.user_id"}}
Using the select method with handlebars each and if helpers I can successfully display an array where only those with active = true.
<select>
{{#each content.users}}
{{#if active}}
<option value="">{{firstName}}</option>
{{/if}}
{{/each}}
</select>
vs
{{view Ember.Select class='btn btn-default dropdown-toggle' style='max-width: 200px'
content=content.users
optionValuePath='content.id'
optionLabelPath='content.firstName'
selectionBinding='someSelectionBinding'}}
The downside to the select way is I can't bind an action to the option value, and I lose out on some of the useful Ember Selection binding and label functionality/observers. Where the downside to the Ember.Select way is I can't set my content to only those users who have the active flag.
I'm assuming you're using a recent version of Ember. In your controller, assuming an Ember.ArrayController with content.users defined as you seem to have it, you'll want to create a new attribute, like activeUsers:
App.ThisController = Em.ArrayController.extend({
// Other stuff
activeUsers = Em.computed.filterBy('users', 'active', true)
})
This should give you an array of users where the active attribute is true, so you can set the content of your Ember.Select view to content.activeUsers.
I'm trying to link a label to an input field using the {{bindAttr}} and the input field's [viewName].elementId. It works on a single entry view, but not when there are several records being displayed: it just links the label to the last input field in the collection. (This used to work in a previous iteration using an older ember library but now it doesnt.) I've created a fiddle but the gist of it is:
{{#each controller}}
<fieldset>
<label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
</fieldset>
{{/each}}
I thought maybe I could create a collectionView and create a calculated property for viewName which would generate a unique ID for each item in the collection, sort of mentioned in answer to another problem here. But that is getting WAY too complicated - just so that I can have the input field highlight itself if the user clicks on the corresponding label.
Any help appreciated.
Create a wrapper Ember.View around the label and input field. Let's call it App.FieldView:
App.FieldView = Ember.View.extend({
tagName: 'fieldset'
});
Then in your template:
{{#each controller}}
{{#view App.FieldView}}
<label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
{{/view}}
{{/each}}
Fiddle: http://jsfiddle.net/NQKvy/26/
Panagiotis Panagi, has answered the question correctly. I'll just add why this is happening, ie:- linking to the incorrect view.
The view property inside a template refers to the Ember View wrapping the html markup. This property however has different value depending on the context it is in.
This value is dependent on the view block it placed in. By default the template itself corresponds to a view in this case, ListOfPeopleTemplateView.
So when you are binding to view.tbFullName.elementId, you are actually binding to an {instance of ListOfPeopleTemplateView}.tbFullName.elementId. And when the loop finishes the only tbFullName visible is the last one.
Panagiotis Panagi's solution is to wrap the label inside another view, so the value of view changes to within that block, and hence points to the correct tbFullName
Finally an even easier way to achieve the same result is to wrap the textfield inside the label. Then you do not need the label for binding at all.
<label>Full Name
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
</label>
See this jsfiddle
Forms are somewhat tricky I must admit if you want to do things right. But there are is an ember add-on that comes to the rescue, for example easyForm.
Have a look it might helps you solving exact the problems you are facing, like the ones on having unique labels for your form fields etc.
Hope it helps.