How to use Ember action helper in element append to the DOM

Question

First, I wanna let you know that I'm just starting at Ember, so, if is there a better way to accomplish the same result, feel free to point at that.

I have a component called "select-room", it should work as the fields "Quartos", "Adultos" and "Crianças" at this site.

In this site when the field "Quartos" is changed, will be added or removed more selects fields on the form, the same happen when the value of "Crianças" change. I was able to accomplish this behavor using DOM manipulation, but when appending a select field like this html+= ''; the action helper don't work.

Link to the full code is at this repo in Github: https://github.com/darwinboaventura/embercvc

What is the best to way to solve this problem?

@kumkanillam I just checked the repository, all the files are in the app folder. — Darwin Boaventura, Jul 06 '17 at 17:56

knownasilya · Answer 1 · 2017-07-06T21:31:23.110

You'd use data set on the component to render DOM elements using handlebars syntax.

{{#if items}}
  <select onchange={{action ..}}>
    {{#each items as |item|}}
      <option value={{item.value}}>{{item.label}}</option>
    {{/each}}
  </select>
{{/if}}

See this example: https://guides.emberjs.com/v2.14.0/templates/displaying-a-list-of-items/

Overall, you should go through the tutorial, so you have a better grasp of how things work in Ember. Start here: https://guides.emberjs.com/v2.14.0/tutorial/ember-cli/

score 0 · Answer 2 · answered Jul 07 '17 at 12:54

I solved the problem, here my solution:

app/components/select-rooms.js:

import Ember from 'ember';

export default Ember.Component.extend({
    name: null,
    quantityRooms: 1,
    rooms: '',
    init() {
        this._super(...arguments);
        this.set('rooms', [1]);
    },
    actions: {
        changeQuantityRooms(value) {
            this.set('quantityRooms', value);
            this.set('rooms', []);

            for (var i = 0; i < this.get('quantityRooms'); i++) {
                this.get('rooms').pushObject(i);
            };
        },
        changeQuantityChildren(value) {
            this.set("quantity" + value.name, value.value);
            this.set(value.name, []);

            for (var i = 0; i < this.get("quantity" + value.name); i++) {
                this.get(value.name).pushObject(i);
            }
        }
    }
});

app/templates/components/select-rooms.hbs:

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label>Quartos</label>

            <select name={{name}} onchange={{action "changeQuantityRooms" value="target.value"}} class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </div>

    <div class="col-sm-6">
        {{#if rooms}}
            {{#each rooms as |room index|}}
                <div class="row">
                    <div class="col-sm-6 form-group">
                        <label>
                            Adultos <small>+18</small>
                        </label>

                        <select name={{concat name index "-adults"}} class="form-control">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                        </select>
                    </div>

                    <div class="col-sm-6 form-group">
                        <label>
                            Crianças <small>até 17 anos</small>
                        </label>

                        <select name={{concat name index "-children"}} onchange={{action "changeQuantityChildren" value="target"}} class="form-control">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                        </select>
                    </div>

                    <div class="col-xs-12">
                        {{#if (get this (concat "quantity" name index "-children"))}}
                            <div class="row">
                                <div class="col-xs-12">
                                    <label>Idade das crianças: </label>
                                </div>
                            </div>

                            <div class="row">
                                {{#each (get this (concat name index "-children")) as | child i |}}
                                    <div class="col-sm-4 form-group">                                        
                                        <select name={{concat name index "-children-age-" i}} class="form-control">
                                            <option value="0">0</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                        </select>                                    
                                    </div>
                                {{/each}}
                            </div>
                        {{/if}}
                    </div>
                </div>
            {{/each}}
        {{/if}}
    </div>
</div>

How to use Ember action helper in element append to the DOM

2 Answers2