0

我通过 Ember每个助手以编程方式显示了一些输入字段。这些输入与从我的数据库返回的数据相关，并且我为每个输入都有一个相应的唯一 ID，如果需要，我可以使用它。

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

{{#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）而不会出现构建错误。

如果使用 value 属性无法做到这一点，但您知道如何通过操作或其他方式完成此操作，那么我非常愿意接受您的想法。

4

2 回答 2

2

这个问题有点令人困惑，所以我将以两种方式回答我解释你的问题。

双向绑定

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

{{input value=solutionType.value}}

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

单向绑定（Data Down Actions Up）

根据您对inputData与众不同的使用，solutionType我假设您想要一种单向绑定。

社区标准是使用 Data Down Actions Up 这样solutionType.value当用户输入数据时它不会改变，而是发送一个动作备份，这样你就可以按照你认为合适的方式管理它。

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

上述插件的一个警告是，您必须solutionTypes在操作恢复时手动管理数据。

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

于 2016-07-12T16:44:49.987 回答
1

是的。您可以使用车把代码中的动态键 (from solutionType.id)，而不会出现构建错误，方法是使用getand muthelper it's possible。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"},  
});

模板/应用程序.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>
于 2016-08-20T06:52:45.633 回答