将数组嵌入对象传递给动态表单的 ember.js 路由时遇到问题答案

【问题标题】：Trouble passing an array embedded object to an ember.js route for dynamic forms将数组嵌入对象传递给动态表单的 ember.js 路由时遇到问题
【发布时间】：2014-01-09 18:13:27
【问题描述】：

我正在尝试使用 Ember.js 基于 JSON 对象制作动态表单。虽然我提供的小提琴有一个与其他路线的主要导航，但它们不是手头的问题，所以我将在解释中跳过它们。

在表单页面上，我有一个为每个表单创建链接的子导航：

<script type="text/x-handlebars" data-template-name="forms">
    <h3>Forms</h3>
    <ul class="mainNav2">
    {{#each}}
        <li>
            {{#link-to 'form' this}}{{name}}{{/link-to}}
        </li>
    {{/each}}
    </ul>
    <div class="formContent">
        {{outlet}}
    </div>
</script>

此路由将包含多个表单数据的 JSON 对象传递给表单模板：

App.FormsRoute = Ember.Route.extend({
    model: function(){
        return forms;
    }
});

这部分似乎工作正常。单击链接后，它应该会加载一个子资源。

this.resource('forms', function(){
    this.resource('form', { path: ':form_id' });
});

这是我传递的对象数组：

var forms = [
    {
        "id": 1,
        "name": "Submissions",
        "elements": [
            {
                "inputType": "text",
                "inputName": "Customer_Name"
            },
            {
                "inputType": "text",
                "inputName": "Customer_Number"
            },
            {
                "inputType": "checkbox",
                "inputName": "Outbound_Call"
            },
            {
                "inputType": "submit",
                "inputName": "submit"
            }
        ]
    },
    {
        "id": "2",
        "name": "Initial Interview",
        "elements": [
            {
                "inputType": "text",
                "inputName": "Business_Name"
            },
            {
                "inputType": "text",
                "inputName": "Business_Hours"
            },
            {
                "inputType": "checkbox",
                "inputName": "Business_Something"
            },
            {
                "inputType": "submit",
                "inputName": "submit"
            }
        ]
    }
];

我可以访问对象中的“id”和“名称”，但无法访问“表单”模板中的“元素”数组。

<script type="text/x-handlebars" data-template-name="form">
    <h2>{{name}}</h2>
    {{#each}}
    <label for="{{elements.inputName}}">{{elements.inputName}}</label><input type="{{elements.inputType}}" name="{{elements.inputName}}" />
    {{/each}}
</script>

如果我将“表单”模板更改为不运行{{#each}}，它将正确加载{{name}}。我仍然不知道如何将“inputName”和“inputType”加载到“表单”模板中。这就是它似乎崩溃的地方。

Partial Working JSFiddle

Broken JSfiddle with the form inputs included

我以前从未真正问过关于 SO 的问题，但如果有人能指出如何将嵌套元素数组传递到“表单”模板的正确方向，我将非常感激。谢谢！

【问题讨论】：

标签： javascript jquery forms dynamic ember.js

【解决方案1】：

如果您的模型没有匹配的属性（路由中的动态 slug），IE form_id 您需要告诉 ember 如何生成链接。 serialize 钩子节省了一天。

App.FormRoute = Ember.Route.extend({
    model: function(){
        return forms[0].elements;
    },
    serialize:function(model){
        return {form_id:Em.get(model, 'id')};   
    }
});

每个助手必须遍历一个数组。当您没有指定任何要迭代的内容时

{{#each}}

{{/each}}

你实际上是在说这个

{{#each this in this}}
    the context of this in here is the item
{{/each}}

您可以更具体地告诉它要迭代什么以及给上下文命名什么。

{{#each item in this}}
    the context of item in here is the item
{{/each}}


{{#each item in elements}}
    the context of item in here is the item, and we're iterating the
    elements array, which might live on the controller or model
{{/each}}


{{#each item in elements}}
    <label for="{{item.inputName}}">{{item.inputName}}</label><input type="{{item.inputType}}" name="{{item.inputName}}" />
{{/each}}

http://jsfiddle.net/t63vR/5/

【讨论】：