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" }}
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.
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"}}
I can't figure out how to use the valueBinding property of Ember.Select to bind the selected value directly to a object from Ember.Data's store.
Fiddle: http://emberjs.jsbin.com/jipamiro/14/edit
The problem I'm facing is that the model returns DS.RecordArray object and I just need the selection value. I tried "firstObject", computed properties and so on to no avail and running out of ideas....
Here is a working bin.
I modified the model hook in the route and the valueBinding property in the template. In the model hook, I am specifying which item to find instead of returning the whole array.
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('setup', 0);
}
});
{{view Ember.Select class="form-control"
viewName="channel"
content=channelOptions
optionValuePath="content.id"
optionLabelPath="content.name"
valueBinding="selectedChannel"}}
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 a select list that is created using this code:
{{view Ember.Select
contentBinding="App.riskCategories"
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding="riskCategory"
class="input-medium"}}
riskCategory is a property of the App.Facility model loaded for the template and the list of App.RiskCategory is populated with this code:
App.ready = function() {
App.riskCategories = App.RiskCategory.all()
}
This works fine and populates the select list but only with the sub-set of Risk Categories already loaded into the browser. If I call App.RiskCategory.find() from the browser console then the rest are loaded and the select list updates however I can't get the code working to do this for me.
So I tried:
App.ready = function() {
App.riskCategories = App.RiskCategory.find()
}
or:
App.ready = function() {
App.RiskCategory.find()
App.riskCategories = App.RiskCategory.all()
}
But both of these result in the following error:
Uncaught Error: Attempted to handle event `loadedData` on <App.Facility:ember417:1> while in state rootState.loaded.updated.uncommitted. Called with undefined
I'd appreciate any help or suggestions on a better way to populate the select list. These App.RiskCategory objects should be considered an immutable collection of constants stored in the db. Each of the App.Facility objects is associated with one of these App.RiskCategories
Thanks!
Try instead to set the categories in your route and access it in your template through the controller
APP.YourRoute = Ember.Route.extend({
setupController:function(controller,model) {
this._super(controller,model);
controller.set('riskCategories',App.RiskCategory.find());
},
});
Assuming your select view is within the same context as the controller, You get access to categories in your template this way:
{{view Ember.Select
contentBinding="controller.riskCategories"
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding="riskCategory"
class="input-medium"}}
I solved this problem by wrapping the rendering of each App.Facility in a {{#if isLoaded}}
So the code looked somthing like:
{{#each client.facilities}}
{{#if isLoaded}}
{{view Ember.Select
contentBinding="App.riskCategories"
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding="riskCategory"
class="input-medium"}}
{{/if}}
{{/each}}
It appears that the App.Facility object that setting the App.RiskCategory hadn't finished loading yet, so the default App.RiskCategory was being set and then when the dataLoaded event was fired, the exception was being thrown because the object had already been modified.
I had a similar problem and the solution using #isLoaded did not work for me. However, what did was to add a prompt property to the Ember.Selectelement. I suspect that that has to do with the asynchronicity of rendering the view and loading the data (in my case from FIXTURES, but as as far as I know DS.FixtureAdapter simulates time-lags in loading data).