Question

我有几个输入字段通过Ember 每个帮助程序以编程方式显示。这些输入与从我的数据库返回的数据有关，并且我有必要为每个输入提供相应的唯一ID。

我的问题是如何在控制器上存储这些动态生成的输入的值，以便我可以访问用户的输入数据？我试图做这样的事情：

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

但是，尝试以这种方式访问对象或数组会导致在指定值时出现与上述语法相关的构建错误（对象点表示法也会导致构建错误）。

简而言之，我试图将输入字段的值保存为对象或数组中的属性，而不是控制器上的普通变量。我希望表格中所有输入的输入数据可以从＆＃34; inputData＆＃34;以下形式的变量：

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

主要问题是在手柄代码中使用动态密钥（来自solutionType.id）而不会出现构建错误。

如果使用value属性无法实现这一点，但您知道如何通过操作或其他方式实现此目标，那么我不仅仅对您的想法持开放态度。

Answer 1

这个问题有点让人困惑，所以我会用两种方式回答你的问题。

双向绑定

{{input}}帮助器在您的示例中与值建立双向绑定：

{{input value=solutionType.value}}

会将solutionType.value绑定到输入。它不仅会显示该值，还意味着当用户输入输入时它会更新solutionType.value。

单向绑定（Data Down Actions Up）

根据您使用的inputData与solutionType不同，我假设您需要单向绑定。

社区标准是使用数据向下操作向上，以便solutionType.value不会随着用户输入数据而发生变化，而是发送备份操作，以便您可以根据需要进行管理。

不幸的是，当前的Ember {{input}}助手不支持此功能。有一个名为ember-one-way-controls的插件可以为您完成此操作。您可能想要尝试一下。

上述插件的一个警告是，您需要在操作重新启动时手动管理solutionTypes数据。

最终，您必须决定通过输入字段显示的数据与您希望用户输入的数据的紧密耦合程度，并相应地调整您的设计。

Answer 2

是。您可以使用句柄代码中的动态键（来自solutionType.id），而不会通过使用get和mut帮助来获取构建错误。 ember-twiddle

对于双向绑定，

{{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>

如何将EmberJS输入值存储在控制器上的对象或数组中

2 个答案:

双向绑定

单向绑定（Data Down Actions Up）