0

Ember eachヘルパーを介してプログラムで表示されるいくつかの入力フィールドがあります。これらの入力は、データベースから返されるデータに関連しており、必要に応じて使用できる各入力に対応する一意の 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。

一方向バインディング (データ ダウン アクション アップ)

inputDataあなたの違いの使い方に基づいて、solutionType一方向のバインディングが必要だと思います。

コミュニティの標準はsolutionType.value、ユーザーがデータを入力しても が変化しないように Data Down Actions Up を使用することですが、代わりにアクションをバックアップして送信するので、必要に応じて管理できます。

残念ながら、現在の Ember{{input}}ヘルパーはこれをサポートしていません。これを行うember-one-way-controlsというアドオンがあります。あなたはそれを試してみたいかもしれません。

上記のアドオンの注意点はsolutionTypes、アクションが戻ってきたときにデータを手動で管理する必要があることです.

最終的には、入力フィールドを介して表示するデータが、ユーザーが入力することを期待するデータとどの程度密接に結びついているかを判断し、それに応じてデザインを調整する必要があります。

于 2016-07-12T16:44:49.987 に答える
1

はい。およびヘルパーsolutionType.idを使用することで、ビルド エラーを発生させることなく、ハンドルバー コードで動的キー (から) を利用できます。エンバー・ツイドルgetmut

双方向バインディングの場合、

{{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>
于 2016-08-20T06:52:45.633 に答える