Передача данных из компонента Ember в модель

Я новичок в Ember и пытаюсь понять, как лучше всего использовать компоненты для изменения модели. Я пытаюсь выяснить, что я на Ember 1.13.7 и использую FixtureAdapter. У меня есть следующий код:

приложение/модели/client.js

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),
    clientCode: DS.attr('string'),
    vatNr: DS.attr('string'),
    regNr: DS.attr('string'),
    address: DS.attr('string'),
    city: DS.attr('string'),
    postCode: DS.attr('string'),
    country: DS.attr('string'),
    lastViewed: DS.attr('date')
}).reopenClass({
  FIXTURES: [
    { id: 1, name: 'Con', clientCo: 'CON01', lastViewed: new Date("2015-03-25T12:00:00") },
    { id: 2, name: 'Moi', clientCo: 'MOI01', lastViewed: new Date("2015-01-25T12:00:00") },
  ]
});

app/routes/clients.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(){
        return this.store.find('client');
    },
    actions: {
        saveClient: function() {
            var model = this.modelFor('clients/show');
            model.save().then(()=> {
                this.transitionTo('clients');
            });
        }
    }
});

приложение/шаблоны/клиенты/edit.hbs

<div class="row">
    <div class="col-md-6">
        <form class="form-horizontal">
            {{bootstrap-input model.name "Name"}}
            {{bootstrap-input model.email "Email"}}
            <div class="text-right">
                <button class="btn btn-primary" {{action 'saveClient'}}>Save</button>   
            </div>
        </form>
    </div>
</div>

приложение/компоненты/bootstrap-input.js

import Ember from 'ember';

export default Ember.Component.extend({
    positionalParams: ['model', 'label']
});

приложение/шаблоны/компоненты/bootstrap-input.hbs

<div class="form-group">
    <label class="col-sm-2 control-label">{{label}}</label>
    <div class="col-sm-10">
        {{input value=model type="text" class="form-control" placeholder=placeholder}}
    </div>
</div>

Теперь, как вы можете видеть, изменения не будут отражены в передаваемой модели, поскольку это односторонняя привязка (я думаю, что это то, что происходит?), или, скорее, не ссылается на модель напрямую. Когда я не использую positionalParams и передаю модель непосредственно в компонент, все работает нормально. Например:

{{bootstrap-input model=model.name label="Name"}}

Но, насколько я понимаю, это неправильный способ сделать это в Ember 2. Как мне перенести изменения, сделанные в моем компоненте, в мою модель, чтобы я мог сохранить их в маршруте?


ember.js ember-cli ember-components
person Constant Meiring    schedule 22.08.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно ссылаться на атрибут как attrs.model вместо model в компоненте.

См. рабочую демонстрацию.

person Daniel Kmak    schedule 22.08.2015
comment
О, круто, это работает. Разве это не идет вразрез со всеми данными, идеей действия вверх, или я упускаю из виду, что это на самом деле означает? - person Constant Meiring; 22.08.2015
comment
Вы можете создать действие, которое запускает событие onKeyUp на входе и обрабатывается родительским маршрутом. И это не противоречит концепции снижения данных, но решать вам. - person Daniel Kmak; 22.08.2015
comment
Это действительно зависит от меня? Использование attrs (что намного проще) пахнет чем-то, что рано или поздно станет устаревшим. :) - person Constant Meiring; 22.08.2015
comment
Если вы хотите использовать лучший способ, следуйте этому новому руководству: guides.emberjs.com/v2.0.0/components/composing-components/ - person Daniel Kmak; 22.08.2015
comment
Я бы не рекомендовал использовать attrs для чего-либо, кроме действий закрытия, пока здесь не появятся компоненты угловых скобок. - person locks; 22.08.2015