javascript - 访问模板内的对象数组

标签 javascript meteor meteor-autoform

我制作了一个集合食谱,然后定义其架构,并且我的架构中有一组对象成分,现在我想访问我的架构中的这些对象数组模板但无法显示它们,您能指导我如何做吗?

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>

最佳答案

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

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

关于javascript - 访问模板内的对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33446168/

相关文章:

c# - 在 Microsoft 的 MVC 和 Javascript 之间共享本地化 ui 字符串的规范方法是什么?

javascript - Google Chrome 错误地计算了元素的高度

javascript - 为什么 Template.mytemplate.rendered 在尝试为 Meteor.js 中的实时更改设置动画时会被触发两次?

Javascript 库仅当放置在与模板相同的目录中时才能与 Meteor.js 一起使用

javascript - 混合 TypeScript 和 Meteor - 跨多个文件的类

javascript - 如何在提交mongodb和meteor时获取变量

JavaScript onChange 事件仅使用当前行值

javascript - 返回默认值的简单方法如果访问可能未定义值的属性

Meteor 自动形成添加额外输入

html - Bootstrap 内联无法按预期使用 meteor autoforms