Ember.js:使用数组控制器中的多个对象计算数组中的一个对象的属性

时间:2013-03-20 19:25:59

标签: ember.js

虽然我已经成功学习了Ember以及如何在我需要的环境中使用它,但我很难找到解决这个要求的方法。

我正在使用Ember处理一组字段定义,以便我可以动态生成一种字段形式以呈现给用户。其中一些字段是根据集合中的其他字段计算的 - 因此在生成字段时,view元素需要能够获取一个或多个其他字段的值。我已经尝试将一个计算控件放在field对象中,并且还使用property(@each)在数组控制器中放置,但没有任何工作。我已经尝试了太多不同的渗透来展示我在这里尝试的解决方案,所以我已经清理了代码并准备好添加所需的绑定功能。

我可能通过使用FieldController使自己变得更难,但它在使用一个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>

0 个答案:

没有答案