I know this is a common problem, but I can't get an Ember.Select view to fire on its value changing. I'd either like to update the selectedInvitation based on the selection in the drop down, or call an action that will perform this behavior.
I've tried variations on Binding Action in Ember.Select and haven't had any luck.
models/uservisit.js
Models.Invitation = DS.Model.extend({
sameSeriesOpenInvitations: DS.hasMany('uservisit', {
async: true
})
});
controllers/user/invitations_controller.coffee
Visitdays.InvitationsController = Ember.ArrayController.extend
selectedInvitationObserver: (->
debugger
if #get('selectedInvitation')
#get('selectedInvitation')._data.event
).observes('selectedInvitation')
actions:
setSelectedInvitation: (invitation) ->
debugger
if invitation
#set 'selectedInvitation', invitation
invitations.emblem
.input-group.full-width
= view Em.Select contentBinding=selectedInvitation.sameSeriesOpenInvitations optionValuePath="content" optionLabelPath="content.event.startTimeFormatted" value="selectedInvitation" class="form-control"
Thanks to #ahmed.hoban who got me in the right direction. I didn't need an action or anything. Since I wanted to deal with the object and not just the id, I really only needed to change the Ember.Select view's selection attribute to the object I wanted to observe change:
.input-group.full-width
= view Em.Select content=selectedInvitation.sameSeriesInvitations optionValuePath="content.id" optionLabelPath="content.visit.startTimeFormatted" selection=selectedInvitation class="form-control"
Related
I am new with ember and I have a question about checkbox binding.
Here is my js && hbs :
CompletedToday(id){
var today = new Date().toISOString().slice(0, 10);
this.get('DS').findRecord('menu',id).then((recs) => {
recs.get('completedDates').pushObject(today);
recs.save();
});
},
{{#each menu}}
{{input type="checkbox" checked=this.checkCompleteToday click=(action "CompletedToday" menu.id)}}
{{/each}}
Menu is a model has a attribute called Completed date, which is a array contains a list of dates(YYYY-MM-DD), there should be a constructor function to check if it’s completed TODAY, if it is completed, make the checkbox of that menu as checked. If not, user can check the specific checkbox I don’t know how to handle this actually, do i need to create another attribute for menu?
Any suggestion would be appreciated
First you need a computed property that returns true or false if TODAY is in the model.
you should create in your component a computed property like:
checked = computed('model', function() {
// pseudocode bellow
return (TODAY in array)
})
Now, if it is unchecked (TODAY not in array), you should be able to insert in array.
In you hbs:
{{input type="checkbox" checked=checked click=(action "CompletedToday" menu.id)}}
(you shouldn't use "this" to reference the property)
If "CompletedToday" is in your component actions, it should work.
I hope this helps
I have used Ember.Select view as follows.
{{view "select" content=people
optionLabelPath="content.fullName"
optionValuePath="content.id"
prompt="Pick a person:"
selection=selectedPerson}}
Now I want to add focus-out="showErrors" event listener to this select view in order to handle some validation. This works perfectly with Ember.TextField and Ember.TextArea. But I noticed the focus-out does not work with Ember.Select view.
It would be really nice if someone can provide a solution to this problem
Could you add an observer to selectedPerson so that when the user changes the dropdown value this will trigger your validation.
Older syntax:
validatePersonChange: function(){
//do validation here
}.observes('selectedPerson')
Newer syntax:
const { observer } = Ember;
...
validatePersonChange: observer('selectedPerson', function(){
//do validation
})
I am trying to do something pretty basic with Ember and Ember Data.
1) Posts belongsTo Users; Users hasMany Posts
2) In the create new Post form, I want to have a select/dropdown of all Users
3) When I edit a post (using the same form), I want to bind it correctly back to the dropbox
Question: What is the best practice to do the dropdown that binds to the list of users?
How can I bind the edit form to populate the dropdown again?
User Model:
App.User = DS.Model.extend({
posts: DS.hasMany('post', {async: true}),
});
Post Model:
App.Post = DS.Model.extend(Ember.Validations.Mixin, {
user: DS.belongsTo('user', {async: true}),
});
Create New Post Form:
{{view Em.Select
content=users <<<<< How do I bind this.store.find("user") here?
optionValuePath='content.id'
optionLabelPath='content.name'
}}
I don't understand the best practice to bind the select content with users.
Attempt 1:
*I am using Ember-Form
{{em-select
property="user_id"
label="user"
prompt="Select user:"
content=controllers.users.content
optionValuePath="content.id"
optionLabelPath="content.first_name"
}}
And on the save action:
newItem.set('user', this.store.getById('user', this.get('user_id')));
I tried to use user_id as my property for the form, and translate back to a user object to assign to the post when I save. However, this method is kind of stupid because I am actively translating user_id to user object every time I save. I feel like there should be a way that that is done automatically if I did the correct binding, instead of jumping through hoops to bind the property as user_id. This also makes it hard for me to bind back when I use the same form for editing the post. Since all the relationship has been setup, I have a feeling that I am doing something wrong here. I think there must be a better way.
Thanks!
As of September 2014 there is an issue with Ember.Select plus { async: true }. They don't play well together.
myModel.get('myAsyncRel') will return a promise, Ember.Select is not promise aware, so it cannot handle this properly.
One workaround is to use a non-async relationship.
https://github.com/emberjs/data/issues/1405
https://github.com/emberjs/data/issues/2111
Another workaround is to use something like this:
http://emberjs.jsbin.com/rwjblue/43/edit?html,css,js,output
The ember team has opened an issue (#5259) for this problem, they are planning to rewrite the whole Ember.Select part.
In the meantime you can use this Add-on from thefrontside:
{{#x-select value=bob action="selectPerson"}}
{{#x-option value=fred}}Fred Flintstone{{/x-option}}
{{#x-option value=bob}}Bob Newhart{{/x-option}}
{{/x-select}}
Install it with ember install emberx-select
EDIT As Stefan Penner wrote, you can now use the ember select as follows (jsbin):
<select onchange={{action "changed" value="target.value"}}>
{{#each model.choices key="#identity" as |choice|}}
<option value={{choice}} selected={{is-equal currentValue choice}}>{{choice}}</option>
{{/each}}
</select>
When you say dropdown I presume you mean a select box? Ember's API has a select view that handles all of the data binding. Here are the docs for Ember.Select.
You can use it in your post form like so:
{{view Em.Select
content=users
selection=user
optionValuePath='content.id'
optionLabelPath='content.name'
}}
If you're using Dockyard's awesome ember-easyForm library you can utilize an Em.Select like this:
{{input user type='as'
collection='users'
selection='user'
optionValuePath='content.id'
optionLabelPath='content.name'
prompt='Choose type...'
}}
Advanced UI using Chosen can be easily integrated with Ember like this.
New deprecation information was added in Ember 1.13 for Ember Select, see http://emberjs.com/deprecations/v1.x/#toc_ember-select.
The new recommended approach in Ember 1.13/2.0 is to implement a component yourself:
e.g.
/components/my-select.hbs
<select>
{{#each users "id" as |user|}}
{{log address}}
<option value="{{user.id}}">
user.name
</option>
{{/each}}
</select>
The ember link shows how to implement selection with selected={{is-equal item selectedValue}} and creation of a is-equal helper.
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).
I'm using the latest pre 1.0 of ember.js and wanted to get away from using the deprecated button for simple forms.
I have something that works but I don't feel like this is the correct way to wire up a view that has both a text input and a button that needs access to that text.
Here is the basic view
{{#view PersonApp.AddPersonView}}
{{view Ember.TextField valueBinding="username"}}
{{#with this as username}}
<input type="submit" value="add" {{action addPerson username}}/>
{{/with}}
{{/view}}
Here is the view
PersonApp.AddPersonView = Ember.View.extend({
username: null,
addPerson: function(event) {
var username = event.context.username;
if (username) {
PersonApp.personController.addPerson(username);
this.set('username', ''); //this does not currently work
}
}
});
The only other issue I'm having is that I don't have access to username the usual way. ie - this.get('username') but in addition I can't clear the textbox value (even though it's shown above).
I'm looking to build a modern version of this gist (previous version of ember) https://gist.github.com/1477225
I see three issues here (perhaps there are more). First, username will not be a field in the event.context, but will actually be the event context. Secondly, I believe you need to specify view.username in the valueBinding, otherwise the controller is the default home of the property (I believe). Then, to set it to initial state you need to set it to null. Third, the target of your action will be the router, so you need to specify the view as the target.
This should work:
{{#view PersonApp.AddPersonView}}
{{view Ember.TextField valueBinding="view.username"}}
{{#with this as username}}
<input type="submit" value="add" {{action addPerson username target="this"}}/>
{{/with}}
{{/view}}
PersonApp.AddPersonView = Ember.View.extend({
username: null
addPerson: function(event) {
var username = event.context;
if (username) {
this.get('controller').addPerson(username);
this.set('username', null);
}
}
});
Also, a better way of creating a new person would be to create a blank person model, bind the controller and view to that, and then save the record, afterwards setting the binding back to null.
You can do the validation and then pass data right now, even with Gidrius' code. The only thing you need to do is write the validation code in the submit handling method. Or, 'cause we`re talking client-side validation anyway, you can do it on field value change or blur, which will give the user almost instant feedback on what he is doing.
I still couldn't get something like this.get('username') to work but I ended up with the following
{{#view PersonApp.AddPersonForm}}
{{view Ember.TextField valueBinding="username"}}
<input type="submit" value="add" {{action addPerson this}}/>
{{/view}}
PersonApp.AddPersonForm = Ember.View.extend({
addPerson: function(event) {
var username = event.context.username;
if (username) {
PersonApp.personController.addPerson(username);
event.context.set('username', '');
}
}
});
probably a bit too late, but might be helpful to someone else.
Usually form field value will be bind to controller or model, so all you need is to have is a submit function in the controller so whenever function will be called you will have access to the fields via bindings.
Here is how it all could look like, assuming you are using latest pre.4 ember
Updated
// DOM part
<form {{action submitForm on="submit"}}>
{{view Ember.TextField valueBinding="username"}}
<button type="submit">add</button>
</form>
And here is a controller
PersonApp.PersonController = Ember.ArrayController({
username: '',
submitForm: function() {
var u = this.get('username'); // saving value to variable
this.set('username',''); // sets username to ''
console.log(u); // will output saved username
}
});