Question

我有一个辅助函数，它返回对象数组，并且数组的每个对象都有密钥发布者，这是一个包含密钥的对象。每个键都有一个对象。

 priceData:function(){

        var colection=[
            {contract:"nn",publishers:{GVM:{ask:1,bid:2},SET:{ask:6,bid:3}}},
            {contract:"BB",publishers:{GVM:{ask:11,bid:99},SET:{ask:23,bid:34}}}
        ]
        return colection
    }

现在在模板中我试图像这样使用它

<table class="table">
<tbody>
{{#each priceData}}
    <tr>
    {{#with publishers}}
            <td>{{ask}}</td>
            <td>{{bid}}</td>
            {{/with}}
        </tr>
    {{/each}}
    </tbody>
    </table>

我可以在#each迭代中使用#with，因为它会给出这样的错误。如果没有，那么如何在表中显示这样的集合信息呢？现在它的空表

Answer 1

each和with没有问题，您可以将它们组合起来并按照您的意愿进行嵌套。要记住的唯一事情是 context ：每个块都深入到上下文中，但同时允许访问外部上下文（我个人不会推荐）。因此，如果您删除所有拼写错误并以这种方式使用整个代码：

<table class="table">
    <tbody>
        {{#each priceData}}
            <tr>
                {{#with publishers}}
                    <td>{{ask}}</td>
                    <td>{{bid}}</td>
                {{/with}}
            </tr>
        {{/each}}
    </tbody>
</table>

然后一切都会好起来的。但请确保数据结构与此代码相对应。但它没有。

您需要的是通过ask或bid访问publishers中的GVM和SET。让我们假装你需要前者：

<table class="table">
    <tbody>
        {{#each priceData}}
            <tr>
                {{#with publishers}}
                    <td>{{GVM.ask}}</td>
                    <td>{{GVM.bid}}</td>
                {{/with}}
            </tr>
        {{/each}}
    </tbody>
</table>

让我们解构整个代码，使图片更清晰。

使用时

{{priceData}}

然后链接到助手返回的内容，即

[{
    contract: "nn",
    publishers: {
        GVM: {
            ask: 1,
            bid: 2
        },
        SET: {
            ask: 6,
            bid: 3
        }
    }
}, {
    contract: "BB",
    publishers: {
        GVM: {
            ask: 11,
            bid: 99
        },
        SET: {
            ask: 23,
            bid: 34
        }
    }
}]

所以当你使用

时

{{#each priceData}}
    ...
{{/each}}

您深入了解帮助程序返回的内容并迭代数组的项目。例如，第一个是

{
    contract: "nn",
    publishers: {
        GVM: {
            ask: 1,
            bid: 2
        },
        SET: {
            ask: 6,
            bid: 3
        }
    }
}

接下来你做的是

{{#with publishers}}
    ...
{{/with}}

对于数组的第一项，上下文是

GVM: {
    ask: 1,
    bid: 2
},
SET: {
    ask: 6,
    bid: 3
}

，第二个是

GVM: {
    ask: 11,
    bid: 99
},
SET: {
    ask: 23,
    bid: 34
}

然后你正在尝试

{{ask}}

这是您的代码失败的地方，因为当前上下文中的结构没有ask属性。但是有属性GVM和SET。所以选择一个你喜欢的并使用它：

{{GVM.ask}}

希望它有所帮助。

Meteor（spacebars）：如何一起使用#with和#each

1 个答案: