emberjs: передача выбранного значения в поле выбора - PullRequest
Новая
       10

emberjs: передача выбранного значения в поле выбора

0 голосов
/ 26 сентября 2019

Я пытаюсь добавить поле SELECT из первых принципов, используя ember, и мне трудно разобраться, как передать выбранный в данный момент параметр в форму при редактировании записи.

Я настроил форму каккомпонента и может успешно использовать его при создании новой записи, причем выбранное значение передается в бэкэнд Rails.Моя проблема в том, что я не могу найти способ применить это выбранное значение к компоненту формы при редактировании существующей записи.

Вот раздел шаблона компонента (book-form.hbs): 

  <div class="form-group">
    <select id="format" onchange={{action 'updateValue' value='target.value'}}>
      <option value=""></option>
      <option value="Paperback">Paperback</option>
      <option value="Hardcover">Hardcover</option>
      <option value="E-Book">E-Book</option>
    </select>

Код шаблона (book-form.js): 

import Component from '@ember/component';

export default Component.extend({
  actions: {
    submitChange(param) {
      this.onSave(param, this.selectedOpt);
    },
    selectedOpt: "",
    updateValue(value) {
      this.set('value', value);
      this.selectedOpt = value;
    },
  }
});

новые и редактируемые шаблоны: 

{{book-form onSave=(action 'saveBook') model=model}}

новый контроллер: 

export default Controller.extend({
  actions: {
    saveBook(newBook,format) {
      var tmp = this.store.createRecord('book', {
        title: newBook.title,
        author: newBook.author,
        genre: newBook.genre,
        format: format,
      });
      tmp.save();
      this.transitionToRoute('books.list');
    }
  }
});

editконтроллер: 

  actions: {
    saveBook(book) {
      book.save();
      this.transitionToRoute('books.list');
    }
  }

Я знаю, что мне чего-то не хватает, чтобы передать значение модели компоненту, но я не уверен, как это сделать или где оно принадлежит.

Буду признателенлюбая помощь вообще.

1 Ответ

2 голосов
/ 26 сентября 2019

HTML-значение элемента выбора по умолчанию может быть достигнуто с помощью с использованием выбранного аргумента в теге опции .

Таким образом, ваш шаблон .hbs будет выглядеть так: 

<select id="format" onchange={{action 'updateValue'}}>
  <option value=""></option>
  <option value="Paperback" selected={{eq value "Paperback"}} >Paperback</option>
  <option value="Hardcover" selected={{eq value "Hardcover"}} >Hardcover</option>
  <option value="E-Book" selected={{eq value "E-Book"}}>E-Book</option>
</select>

иВаш component.js будет выглядеть так: 

value: 'Hardcover', 

actions: {
  updateValue(event){
    this.set('value', event.target.value); 
  }
}

Вы можете взглянуть на этот твидл , например, для использования.Кстати, этот пример зависит от дополнения ember-true-helpers при использовании eq helper.

...