流星（空格键）：如何一起使用#with和#each

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>

那么一切都会好起来的。但请确保数据结构与此代码相对应。但事实并非如此。

您需要通过GVM 或SET 访问publishers 内的ask 和bid。假设您需要前者：

<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}}

希望对你有帮助。