访问模板内的对象数组答案

【问题标题】：access array of objects inside template访问模板内的对象数组
【发布时间】：2015-10-31 07:46:15
【问题描述】：

我创建了一个集合Recipes，然后定义了它的架构，我的架构中有一组对象ingredients，现在我想访问我的那些对象数组模板但无法显示，请指导我如何操作？

collections.js

  Recipes = new Mongo.Collection('recipes');
    Recipes.attachSchema(new SimpleSchema({
        name: {
            type: String,
            label: "Recipe Name",
            max: 100
        },

            ingredients: {
                type: [Object],
                minCount: 1
            },

        "ingredients.$.name": {
        type: String
            },
        "ingredients.$.amount": {
        type: String
        },
        description: {
            type: String,
            label: "How to prepare ",
        },
        time: {
            type: Number,
            label: "Time (Minutes)",
        },
        image: {
            type: String,

            autoform: {
                afFieldInput: {
                    type: "cfs-file",
                    collection: 'recipesImages',
                    label: 'Recipe Picture'
                }
            }
        }
    }));

router.js

Router.route('/show_recipe/:_id', {
    name: 'show_recipe',
    template: 'show_recipe',
    data: function() {
        return Recipes.findOne(this.params._id);
    }
});

show_recipe.html

<template name="show_recipe">
    <div class="container">
        <div class="row">

            <div class="col-md-8">

                {{#with FS.GetFile "recipesImages" image}}
                    <img class="img-responsive mt" src="{{url}}"/>
                {{/with}}
            </div>
            <div class="col-md-4" >
                <ul class="list-group">

                    <h3> Ingredients</h3>
                        <li class="list-group-item">{{ingredients.name}} - {{ingredients.amount}}</li>
                </ul>

            </div>

        </div>
        <div class="row">
            <div class="col-md-8">
                <h4>{{name}}</h4>
                <p> {{description}}</p>
            </div>
        </div>
    </div>
</template>

【问题讨论】：

标签： javascript meteor meteor-autoform

【解决方案1】：

您只缺少一个 {{#each}} 来迭代 ingredients 数组。使用它将数据上下文设置为数组的一个元素，然后您可以直接访问键：

<h3> Ingredients</h3>
{{#each ingredients}}
  <li class="list-group-item">{{name}} -  {{amount}}</li>
{{/each}}

【讨论】：