Как сохранить входное значение EmberJS в объекте или массиве на контроллере

Question

У меня есть несколько полей ввода, которые отображаются программно через каждого помощника Ember. Эти входные данные связаны с данными, возвращаемыми из моей базы данных, и у меня есть соответствующий уникальный идентификатор для каждого входа, который я мог бы использовать при необходимости.

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

{{#each solutionTypes as |solutionType|}}
    {{input value=inputData[solutionType.id]}}
{{/each}}

Однако попытка получить доступ к объекту или массиву таким образом вызывает ошибку сборки, связанную с приведенным выше синтаксисом при указании значения (запись точки объекта также вызывает ошибку сборки).

Короче говоря, я пытаюсь сохранить значение поля ввода в виде свойства объекта или в массиве, а не в виде простой переменной на контроллере. Я хотел бы, чтобы входные данные из всех входных данных в форме были доступны из переменной "inputData" в следующей форме:

{
    "1000": "data from first input",
    "1001": "data from second input",
    "1002": "data from third input"
}

Основная проблема заключается в использовании динамических ключей (из solutionType.id) в коде руля без получения ошибки сборки.

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

Answer 1

Вопрос немного запутанный, поэтому я отвечу обоими способами, как я интерпретировал ваш вопрос.

Двухстороннее связывание

{{input}} helper устанавливает двухстороннее связывание со значением, поэтому в вашем примере:

{{input value=solutionType.value}}

будет связывать solutionType.value на вход. Он не только отображает это значение, но и означает, что когда пользователь вводит данные, он будет обновлять solutionType.value,

Односторонние привязки (Действия при отключении данных вверх)

На основании вашего использования inputData быть другим тогда solutionType Я предполагаю, что вы хотите одностороннюю привязку.

Стандарт сообщества заключается в использовании Data Down Actions Up таким образом, чтобы solutionType.value не изменяется, когда пользователь вводит данные, но вместо этого отправляет действие обратно, чтобы вы могли управлять им по своему усмотрению.

К сожалению нынешний Ember {{input}} Помощник не поддерживает это. Существует дополнение под названием https://github.com/DockYard/ember-one-way-controls, которое сделает это за вас. Вы можете поэкспериментировать с этим.

Предостережение с приведенным выше дополнением заключается в том, что вам придется управлять solutionTypes данные вручную, поскольку действия возвращаются.

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

Answer 2

Да. Вы можете использовать динамические ключи (от solutionType.id) в коде руля без получения ошибки сборки с помощью get а также mut помощник это возможно. уголек-вертеть

Для двухстороннего связывания,

{{input value=(mut (get inputData (get solutionType 'id'))) }}

Для одностороннего связывания,

{{input value=(get inputData (get solutionType 'id')) }}

маршруты /application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return [{id:'1000'},{id:'1001'},{id:'1002'}];
  },
  setupController(controller,model){
    this._super(...arguments);
    controller.set('solutionTypes',model);
  }
});

Контроллеры /application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  inputData:{'1000': "data from first input", '1001': "data from second input",'1002': "data from third input"},  
});

шаблоны /application.hbs

<h1>Welcome to {{appName}}</h1>
<br>

<h1> One way binding </h1>
{{#each solutionTypes as |solutionType|}}
 {{input value=(get inputData (get solutionType 'id')) }}
{{/each}}

<h2> Two way binding </h2>
{{#each solutionTypes as |solutionType|}}
 {{input value=(mut (get inputData (get solutionType 'id'))) }}
{{/each}}
<br>
<h2> Result </h2>
 {{#each solutionTypes as |solutionType|}}     
   <span> {{get inputData (get solutionType 'id')}} </span>
 {{/each}}
 <br />
{{outlet}}
<br>
<br>