Question

我正在尝试使用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'和'name'，但我无法访问'form'模板中的'elements'数组。

<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'加载到'form'模板中。这就是它似乎破裂的地方。

Partial Working JSFiddle

Broken JSfiddle with the form inputs included

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

Answer 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/

麻烦将数组嵌入对象传递给动态表单的ember.js路由

1 个答案: