Ember の学習と、必要なコンテキスト内での使用方法にはある程度成功しましたが、この要件の解決策を見つけるのに苦労しています。
Ember を使用してフィールド定義の配列を処理し、ユーザーに提示するフィールドのフォームを動的に生成できるようにしています。これらのフィールドの一部は、コレクション内の他のフィールドに基づいて計算されます。そのため、フィールドを生成するとき、ビュー要素は他のフィールドの 1 つ以上の値を取得できる必要があります。計算されたコントロールをフィールド オブジェクトに配置しようとしましたが、proper(@each) を使用して配列コントローラーにも配置しようとしましたが、何も機能しませんでした。ここで試みた解決策を示すにはあまりにも多くの異なる浸透を試みたので、コードをきれいにして、必要なバインドされた機能を追加する準備ができたままにしました。
おそらく、FieldController を使用することで自分自身をより困難にしましたが、1 つの view_field テンプレートを使用して view_fields のフォームを生成すると、非常にうまく機能します。
<html>
<head>
<title>Ember.js: Calculate properties using multiple object in an array controller</title>
<link rel="stylesheet" href="css/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/libs/ember-0.9.5.min.js"></script>
<script>
//the application
App = Ember.Application.create({
});
//the model
App.Field = Ember.Object.extend({
"name": null,
"value": null,
"controlsource": null
});
//an array controller to interface between the data and the views
App.FieldController = Ember.ArrayController.extend({
content: [],
});
App.instanceFieldController=App.FieldController.create();
//populate the controller with data
App.instanceFieldController.pushObjects([
App.Field.create({name:"field1",value:"1",controlsource:""}),
App.Field.create({name:"field2",value:"2",controlsource:""}),
App.Field.create({name:"field3",value:null,controlsource:"field1"}),//this field's value should be calculated from field1
App.Field.create({name:"field4",value:null,controlsource:"field2"})//this field's value should be calculated from field2
]);
//A collection-view which has a collection of a view, each of which defines the presentation of a fields
App.FieldCollectionView = Em.CollectionView.extend({
itemViewClass: Em.View.extend({
templateName: "textFieldTemplate"
}),
contentBinding: "App.instanceFieldController.content"
});
</script>
<h1>Ember.js: Calculate properties using multiple object in an array controller</h1>
<!-- THE FORM TO BE POPULATED WITH THE FIELDS -->
<script type="text/x-handlebars">
<form action="">
{{view App.FieldCollectionView}}
<input type="submit" value="Go">
</form>
</script>
<!-- THE TEMPLATE FOR HOW TO DISPLAY EACH FIELD -->
<script type="text/x-handlebars" data-template-name="textFieldTemplate">
<label {{bindAttr for="textField.elementId"}}>{{content.name}}</label>
{{view Em.TextField valueBinding="content.value"}}
</script>