I am trying to add events for two values in the combobox using emberJs. This is what I have tried.
<select class="bs-select form-control input-small">
<option {{action 'allData' }}>All Data </option>
<option {{action 'myData' }}>My Data </option>
</select>
I have added two functions in my controller by name allData & myData but these functions never gets called. What should I do ?
You can try using a binding instead. {{view Ember.Select}}
see: http://emberjs.com/api/classes/Ember.Select.html
You can add a binding for the value and add an observer in your controller to do something when the señection changes.
Related
i have this select tag on Livewire component:
<select
class="form-select deliveryGuySelect"
id="order-{{THIS_NEED_TO_BE_$dg->id}}"
wire:change="assignOrder({{$order->id}})"
>
#foreach($deliveryGuys as $dg)
<option value="{{$dg->id}}" wire:key="{{$dg->id}}">{{$dg->name}}</option>
#endforeach
</select>
And I need, on assignOrder() action from select tag, to send the option value as parameter $dg->id.
How can I do that?
Livewire and Alpine together expose the $event magic action-object, which can target the option that was selected, and the value it has, by using $event.target.value
<select wire:change="setSomeProperty($event.target.value)">
<!-- Options here -->
</select>
https://laravel-livewire.com/docs/2.x/actions#magic-actions
/ 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
I am an extreme newbie, for which I apologize, but I'm not finding this...
In templates/editor/journal.hbs, this works:
<h2>Journal template</h2>
<select>
<option value="" disabled="disabled" selected="selected">Periodicals:</option>
{{#each model as |journal|}}
<option value="{{journal.id}}"> {{journal.name}}</option> {{journal}}
{{/each}}
</select>
{{outlet}}
But the same code, in my component (journal-list), does not...
with journal.hbs changed to
<h2>Journal template</h2>
{{journal-list title="Crazy Test" model=journal}}
{{outlet}}
And that code in journal-list.hbs,
{{yield}}
<h1>{{title}}</h1>
<select>
<option value="" disabled="disabled" selected="selected">Periodicals:
</option>
{{#each model as |journal|}}
<option value="{{journal.id}}"> {{journal.name}}</option>
{{/each}}
</select>
all stubs generated by ember generate, I do get the title but the listview is unpopulated.
What magic am I missing? Do I need to configure a route to the component, for example?
Thanks
Uggah. I did spend over an hour on that before posting!
It's simple. Instead of journal.hbs having model=journal, it needed model=model.
This is my sample drop down
<select name="newType" class="parts-select full-width-combo" onchange={{action "loadFilter" value="target.value" }}>
<option value="" selected hidden >Select </option>
{{#each model as |item|}}
<option value="{{item.id}}">{{item.description}}</option>
{{/each}}
</select>
from the relevant template action I wanted to set this selected item dynamically.
As an example it default selected by "Select" and then based on some button click on that page and need to set my selected option to other selected option to be selected.
I am not using any plugin and I can't do it here.
I used mut helper to set directly to selectedItemId property. so onchange it will update it automaticaly. also used ember-truth-helper for eq helper to decide particular item is selected or not.
<select name="newType" class="parts-select full-width-combo" onchange={{action (mut selectedItemId) value="target.value" }}>
<option value="" selected hidden >Select </option>
{{#each model as |item|}}
<option value="{{item.id}}" selected={{if (eq item.id selectedItemId) 'true'}}>{{item.description}}</option>
{{/each}}
</select>
You can use ember-truth-helpers' eq helper to set which option is selected. I believe I have coded what you are asking at this twiddle. See my-component.hbs about how I used eq helper to set selected attributes of each option.
By the way I suggest using ember-power-select for select box instead of trying to write your own select with options.
Here is my template snippet.
{{#if is_multiple_choice _id}}
<div class="row" style="margin-bottom: 20px;">
<div class="input-field col s11">
<select id="ans_{{_id}}" name="answer" class="multiple_choice_answer">
<option value="">No Answer Given for Multiple Choice</option>
{{#each allowed_values}}
{{#if matched value _id}}
<option value="{{value}}" selected>{{value}}</option>
{{else}}
<option value="{{value}}">{{value}}</option>
{{/if}}
{{/each}}
</select>
<label>{{text}}</label>
</div>
</div>
{{/if}}
So I aimed to use _id in "matched" helper, but it seems the _id in matched value _id line gets nothing.
How can I get _id and use it in "matched" helper?
Please help me!!!
Within the {{#each}} {{/each}} loop, you are in a child context
To access the parent context, you need to use the .. notation, like this: ../_id.
You can also use this within a Template.helper to get this._id:
Template.example.helper({
"id": return this._id;
});
You can then use id anywhere in the Template.
Note:
1) this._id is equivalent to Template.instance().data._id within a helper.
Use Template.instance().data to access the template data context within an event, onCreated or onRendered.
2) The .. notation can be used to access the grand-parent template as well, with ../../_id for example.
This .. pattern is acceptable to access parent context from a {{#each}} loop within the same Template for example, but it is not recommended to use with child templates (to access parent template) because your child template is not reusable without the parent template context.