Ember Data: изменить данные модели в компоненте и записать их обратно в API - PullRequest
Новая
       24

Ember Data: изменить данные модели в компоненте и записать их обратно в API

0 голосов
/ 05 июня 2019

Я изучаю ember.js прямо сейчас и не могу понять, как работает редактирование данных модели. У меня есть простая модель под названием singleitem: 

export default Model.extend({
    test: DS.attr('string')
});

Существует шаблон singleitem.hbs, который использует компонент шаблона interface_text.hbs, содержащий следующую строку: 

<input type="text" value="{{singleitem.test}}" />

И соответствующий interface_text.js компонент: 

export default Component.extend({
    change() {
        console.log(this);
    }
});

Всякий раз, когда я изменяю содержимое тега <input>, запускается метод change(), так что это работает. Но как мне обновить модель с новым значением <input>?

(Моя конечная цель - записать измененные данные обратно в мой API. Использование this.test.save(); инициирует запрос PATCH к моему API, но отправляет обратно неизмененные данные. Поэтому я думаю, что сначала мне нужно изменить модель. ) * * тысяча двадцать-один

1 Ответ

3 голосов
/ 06 июня 2019

Самый простой способ использовать двустороннюю привязку для входов - использовать помощник ввода, предоставленный ember

Чтобы упростить примеры, представьте, что вы используете компонент со свойством test: 

// template.hbs
{{input value=this.test}}

Второй самый простой способ - использовать помощник mut с тегом ввода HTML: 

// template.hbs
<input type="text" value="{{this.test}}" oninput={{action (mut this.test) value="target.value"}}/>

Вместо использования помощника mut вы можете назначить действие этому событию: 

// template.hbs
<input type="text" value="{{this.test}}" oninput={{action "changed"}}/>

// component.js
actions: {
  changed(e) {
    this.set('test', e.target.value);
  }
}

В любом случае, есть некоторые важные концепции, которые вам необходимо изучить, чтобы достичь своей цели, поэтому я настоятельно рекомендую вам прочитать документацию Ember. Есть отличное учебное пособие , которое охватывает все, что вам нужно, чтобы начать работать с Ember.

...