Question

首先，我想让你知道我刚刚开始在Ember开始，所以，如果有更好的方法来实现相同的结果，请随意指出。

我有一个名为“select-room”的组件，它应该在this站点的“Quartos”，“Adultos”和“Crianças”字段中工作。

在此站点中，当“Quartos”字段被更改时，将在表单上添加或删除更多选择字段，当“Crianças”的值发生更改时也会发生相同的情况。我能够使用DOM操作来完成这个行为，但是在追加像这样的选择字段时html + ='';动作助手不起作用。

完整代码的链接位于Github的这个仓库：https://github.com/darwinboaventura/embercvc

解决此问题的最佳途径是什么？

Answer 1

您将使用组件上的数据集来使用句柄语法呈现DOM元素。

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

请参阅此示例：https://guides.emberjs.com/v2.14.0/templates/displaying-a-list-of-items/

总的来说，您应该阅读本教程，以便更好地掌握Ember的工作原理。从这里开始：https://guides.emberjs.com/v2.14.0/tutorial/ember-cli/

Answer 2

我解决了问题，这是我的解决方案：

应用/组件/选择-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);
            }
        }
    }
});

应用程序/模板/部件/选择-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>

如何在元素中使用Ember动作助手附加到DOM

2 个答案: