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"}}
Related
So I'm building a component tied to a hasMany relation on an ember data model. I have a search modal that I'm popping up, and I just want to take the result of the search and use addObject to add the model to the relationship.
export default Ember.Controller.extend({
// relation is set when the controller is set up
actions: {
pushSelection(selection) {
this.get('relation').addObject(selection);
}
}
});
So If I do the most basic form of an ember select, this works fine:
{{view "select"
content=results
value=selection
class="form-control"}}
<button type="button" {{action pushSelection selection}}>Make Selection</button>
The above works, but the select is full of ember internal instance names and not at all acceptable.
If I set optionLabelPath, it immediately stops working and selection int he action is undefined. I have tried, I think, every possible combination of value, objectLabelPath, optionValuePath and selection.
//reference selection by ID
{{view "select"
content=results
value=selection.id
optionValuePath='content.id'
optionLabelPath='content.text'
class="form-control"}}
//try just binding to whatever object
{{view "select"
content=results
value=selection
optionValuePath='content.id'
optionLabelPath='content.text'
class="form-control"}}
//don't bind the value of the option to the id
{{view "select"
content=results
value=selection
optionLabelPath='content.text'
class="form-control"}}
//trying with the selection option instead
{{view "select"
content=results
selection=selection
optionValuePath='content.id'
optionLabelPath='content.text'
class="form-control"}}
I've done this sort of thing with the select2 addon before, which is nice, but this is for an addon and I don't really want to add that dependency if I can avoid 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 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
I need to display several Ember.Select widgets in a loop:
{{#each foo}}
{{view Ember.Select
selectionBinding="App.s1.selected"
contentBinding="App.s1.content"
}}
}}
The problem is that this will tie all these selects to the same model ("App.s1"). How can I tie each Ember.Select to a different model?
Ideally, I'd like to define an array of my models and in the loop, tell Ember to use the index "i" of that array, where "i" is the index of the current iteration. Is this possible at all?
You would want to store all of your sN's (s1, s2, s3, etc) in an array, say App.contentArray, and then in your template do
{{#each item in App.contentArray}}
{{view Ember.Select selectionBinding="item.selected" contentBinding="item.content"}}
{{/each}}
No need for an i index or explicit for loops.
I am trying to use the Ember.Select control to set an association id on a model. However, I can't seem to get the control to bind it's selection to an id attribute instead of the entire model object. Is this by design in the Ember.Select control? I have the following in my template:
{{view Ember.Select
contentBinding="App.peopleController.content"
selectionBinding="App.selectedPersonController.personId"
optionLabelPath="content.fullName"
optionValuePath="content.id"}}
Yet even with explicitly setting selectionBinding to the personId attribute it still seems to be binding to the person object. Full jsfiddle here: http://jsfiddle.net/PXVZb/10/
I would suggest to bind the selected person to your App.selectedPersonController and create a property personId which binds to the persons id, see http://jsfiddle.net/PXVZb/11/
JS:
App.selectedPersonController = Ember.Object.create({
personIdBinding: 'person.id'
});
Handlebars:
{{view Ember.Select
contentBinding="App.peopleController.content"
selectionBinding="App.selectedPersonController.person"
optionLabelPath="content.fullName" }}