I have the following in my template:
<select>
{{#each sortedManufacturers key="id" as |manufacturer|}}
<optgroup label="{{manufacturer.name}}">
{{#each manufacturer.cars key="id" as |car|}}
<option {{action "carSelected" car}} value="{{car.model}}">{{car.model}}</option>
{{/each}}
</optgroup>
{{/each}}
</select>
In the controller, I have:
actions: {
carSelected(car) {
console.log(car);
}
}
When the option is selected from the select. It doesn't seem to trigger the carSelected action.
Any ideas why?
In Ember > 1.13 you can do the following:
<select onchange={{action "carSelected" value="target.value"}}>
<!-- ... -->
</select>
With component JS:
export default Component.extend({
actions: {
carSelected(car) {
// ..
}
}
});
Or you can use the unquoted “closure action” form:
<select onchange={{action carSelected value="target.value"}}>
<!-- ... -->
</select>
With component JS:
export default Component.extend({
carSelected(car) {
// ..
}
});
See the improved actions RFC for more on all this.
I don't exactly know why click event is not binded to option this way. I beleive it's better to use change event on select instead.
<select {{action 'carSelected' on='change'}}> ... </select>
Here is implementation details: http://emberjs.com/deprecations/v1.x/#toc_ember-select
Related
/ exams / template.hbs
<form>
<select name="selectvalue" id="selectvalue">
<option value="one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
<button type="submit" {{action "printans"}}> Submit </button>
</form>
/ exams / controller.hbs
import Controller from '#ember/controller';
export default Controller.extend({
actions: {
printans: function(){
let val = this.get('selectvalue');
console.log(val);
}
}
});
All I need is I want to replace the html code in the template.hbs with handlebars, and when the form is submitted, I need to pass the value to the controller.
Do you mean something like:
<form>
{{#power-select
selected=selectvalue
options=cities
onchange=(action "printans")
as |name|
}}
{{name}}
{{/power-select}}
</form>
I'm totally guessing here.
Additional Details would be helpful:
- what are you trying to do (specifically)
- where do you get your list of items?
There is this addon, which covers a lot more common behavior: https://github.com/cibernox/ember-power-select
Tried to search some example with form select list but seems they always take value by using onchange function
http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html
However in my project I want something like this:
<form {{action "createBook" on="submit"}}>
<p>{{input type='text' id='title' value=title}}</p>
<p> <select name="lang" id="lang">
<option value="">--Choose--</option>
{{#each model.language as |lang|}}
<option value="{{lang.url}}">{{lang.title}}</option>
{{/each}}
</select>
</p>
</form>
In my controller I have:
actions:{
createBook() {
var title = this.get('title'); //This line works fine
var lang = this.get('lang'); //This value from select isnt working at all
//do stuffs ..
},
}
What can i do so that i can get the value from select in createBook() actions?
You can pass the option value in select onchange and set value in from action handler,
<select onchange={{action "selectOption" value="target.value"}}>
<option value="">--Choose--</option>
{{#each model.language as |lang|}}
<option value="{{lang.url}}">{{lang.title}}</option>
{{/each}}
{{/each}}
Actions,
actions: {
selectOption: function(option) {
this.set("lang", option);
}
}
you can use like this
<select {{action 'change' on='change'}}>
{{#each content as |item|}}
<option value="{{item.id}}">
{{item.name}}
</option>
{{/each}}
in onchange method and set the property of lang of selected item
actions: {
createBook() {
var title = this.get('title'); //This line works fine
var lang = this.get('lang');
console.log(lang, title);
},
change() {
const selectedEl = this.$('select')[0];
const selectedIndex = selectedEl.selectedIndex;
const selectedValue = this.get('content')[selectedIndex];
this.set('lang', selectedValue.id)
}
}
Please check hereTwiddle
How to display html button based loops index?
Hi
I have a this template:
<ul>
{{#each answers as |answer key|~}}
<li>
<label>Answer text: <input type="text" name="answer-definition-label[]"
value={{answer}}/></label>
<input type="radio"/> {{view.showDelete}}
</li>
{{~else~}}
<li>
<label>Answer text: <input type="text" name="answer-definition-label[]"/></label>
<input type="radio" checked/>
</li>
<li>
<label>Answer text: <input type="text" name="answer-definition-label[]"/></label>
<input type="radio"/>
</li>
{{~/each}}
</ul>
<button {{action "addAnswerRow"}} type="button">Dodaj</button>
Class app/views/forms/elements/ix-selectable-fields.js
import Ember from "ember";
var ShowDelete = Ember.Component.extend({
template: Ember.HTMLBars.compile('<button style="color:red;">X</button>'),
init :function(){
console.log(this);
console.log(arguments);
}
});
export default Ember.View.extend({
content : undefined,
template: function() {
if (this.get("content") instanceof Object) {
return this.get("content");
} else {
return Ember.HTMLBars.compile('Please choose answer');
}
}.property(),
showDelete : ShowDelete
});
In the {{each}}{{else}} part I want to display X to allow user to delete rows (li's).
When rows come out of store I would like to make delete button appear at the key>1 (for key==0 and key==1 there is no button).
I tried {{if key>1 'test'}} but it throws "Build error",
then I tried {{view.showDelete key}} but I get
"Uncaught Error: Assertion Failed: A helper named 'view.showDelete' could not be found".
Resolution for Ember-cli (ember.js 1.12.1) based on #Kit-Sunde answer:
//app/helpers/boolean/ix-gt.js
import Ember from "ember";
export default Ember.Handlebars.makeBoundHelper(function (a, b) {
return a > b;
});
Create helpers/gt.js with:
export default (a, b) => a > b;
Then in your template:
{{#if (gt key 1)}}
{{view.showDelete}}
{{/if}}
In Ember's input helper, how can I show/hide attributes based on a condition? For example, let's say I want to show required="required" if isEditable is true and disabled="disabled" otherwise. Currently I have something like this:
{{#if isEditable}}
{{input value=model.name required="required"}}
{{else}}
{{input value=model.name disabled="disabled"}}
{{/if}}
...but it would be nice if I bind the attributes somehow instead.
{{ input type='text' required=required disabled=disabled }} works just fine
Working example here
There are a whole bunch of attributes that you can bind directly and required and disabled are among the pack. See here
Note #blackmind is correct that if you were to do this from scratch, you would need to do some work. Fortunately though, TextSupport already does the work for you... :) See here
From the EmberJS site
By default, view helpers do not accept data attributes. For example
{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}
{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}
renders the following HTML:
<a id="ember239" class="ember-view" href="#/photos">Photos</a>
<input id="ember257" class="ember-view ember-text-field" type="text" title="Name">
There are two ways to enable support for data attributes. One way would be to add an attribute binding on the view, e.g. Ember.LinkView or Ember.TextField for the specific attribute:
Ember.LinkView.reopen({
attributeBindings: ['data-toggle']
});
Ember.TextField.reopen({
attributeBindings: ['data-toggle', 'data-placement']
});
Now the same handlebars code above renders the following HTML:
<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>
<input id="ember259" class="ember-view ember-text-field"
type="text" data-toggle="tooltip" data-placement="bottom" title="Name">
Or you can reopen the view
Ember.View.reopen({
init: function() {
this._super();
var self = this;
// bind attributes beginning with 'data-'
Em.keys(this).forEach(function(key) {
if (key.substr(0, 5) === 'data-') {
self.get('attributeBindings').pushObject(key);
}
});
}
});
I typically do the following
<input type="checkbox" {{bind-attr disabled=isAdministrator}}>
I just upgraded from ember.js RC7 to RC8 and found that a simple template (shown below) would throw a deprecated warning
"Action handlers implemented directly on controllers are deprecated"
{{input class="firstName" type="text" placeholder="first name" value=firstName }}
{{input class="lastName" type="text" placeholder="last name" value=lastName }}
<button class="submit" {{action addPerson}}>Add</button>
<br />
<table>
{{#each person in controller}}
<tr>
<td class="name">{{person.fullName}}</td>
<td><button class="delete" {{action deletePerson person}}>Delete</button></td>
</tr>
{{/each}}
</table>
How should I modify the above template to correct this?
It looks like I just needed to give the PR a look that changed this :)
In my controller I just needed to move the addPerson / deletePerson under actions like so
App.PeopleController = Ember.ArrayController.extend({
actions: {
addPerson: function() {
var person = {
firstName: this.get('firstName'),
lastName: this.get('lastName')
};
App.Person.add(person);
},
deletePerson: function(person) {
App.Person.remove(person);
}
}
});
You should define your actions inside the actions hash in the controllers, views and routes to favour consistency.
Refer this https://github.com/emberjs/ember.js/pull/3091
Demo Fiddle
App.ApplicationController = Em.ObjectController.extend({
actions : {
// your actions here
}
});