在 Meteor 模板和模板助手中访问父上下文 [英] Accessing parent context in Meteor templates and template helpers

问题描述

我遇到了一个模板上下文情况，我很难找到解决方法.

这是有问题的模板:

{{#each votes}}<h3>{{问题}}</h3><ul>{{#每个参与者}}<li><p>{{email}}</p><选择名称=选项-选择">{{#each ../options}}<option value="{{option}}" class="{{is_selected_option}}">{{option}}</option>{{/每个}}</选择>{{/每个}}

{{/每个}}

这是一个投票文件的例子:

<代码>{_id: '32093ufsdj90j234',问题:有史以来最好的食物是什么?"选项: ['比萨'，'炸玉米饼'，'沙拉'，'泰国'],参与者: [{id: '2f537a74-3ce0-47b3-80fc-97a4189b2c15'投票:0},{编号:'8bffafa7-8736-4c4b-968e-82900b82c266'投票数:1}]}

问题来了……

当模板放入参与者的 #each 时，它不再有权访问 vote 上下文，因此无法访问可用选项每次投票.

我可以在某种程度上通过使用 ../options 把手路径跳回父上下文来解决这个问题，但这不会影响模板助手，所以Template.vote.is_selected_option中的this指的是当前的participant，而不是当前的vote或 option，并且无法知道我们当前正在迭代哪个 option.

关于如何在不诉诸 DOM 操作和 jQuery 恶作剧的情况下解决此问题的任何建议?

这是一个模板问题，我多次出现.我们需要一种在模板、模板助手和模板事件中到达模板上下文层次结构的正式方法.

解决方案

它不是特别漂亮，但我做了这样的事情:

<模板名称='forLoop'>{{#每个增强的参与者}}{{>参与者}}{{/每个}}<模板名称='参与者'>...问题:{{this.parent.question}}...//在 js 中:Template.forLoop.helpers({增强的参与者:函数(){var self = this;返回 _.map(self.participants,function(p) {p.parent = 自己；返回 p;});}});

它类似于 AVGP 建议的方法，但在帮助程序级别而不是数据库级别增加了数据，我认为这更轻一些.

如果您喜欢，可以尝试编写一个 Handlebars 块助手 eachWithParent 来抽象此功能.Meteor 对把手的扩展记录在此处:https://github.com/meteor/meteor/wiki/Handlebars

I'm running into a template context situation that I'm having a hard time finding a way around.

Here's the template in question:

{{#each votes}}
    <h3>{{question}}</h3>

    <ul>
        {{#each participants}}
            <li>
                <p>{{email}}</p>
                <select name="option-select">
                    {{#each ../options}}
                    <option value="{{option}}" class="{{is_selected_option}}">{{option}}</option>
                    {{/each}}
                </select>
            </li>
        {{/each}}
    </ul>
</div>
{{/each}}

And here's an example of a vote document:

{
    _id: '32093ufsdj90j234',
    question: 'What is the best food of all time?'
    options: [
        'Pizza',
        'Tacos',
        'Salad',
        'Thai'
    ],
    participants: [
        {
            id: '2f537a74-3ce0-47b3-80fc-97a4189b2c15'
            vote: 0
        },
        {
            id: '8bffafa7-8736-4c4b-968e-82900b82c266'
            vote: 1
        }
    ]
}

And here's the issue...

When the template drops into the #each for participants, it no longer has access to the vote context, and therefore doesn't have access to the available options for each vote.

I can somewhat get around this by using the ../options handlebars path to jump back into the parent context, but this doesn't affect the context of the template helper, so this in Template.vote.is_selected_option refers to the current participant, not to the current vote or option, and has no way of knowing which option we are currently iterating through.

Any suggestions on how to get around this, without resorting to DOM manipulation and jQuery shenanigans?

This is a templating issue that has come up multiple times for me. We need a formal way of reaching up the template context hierarchy, in templates, template helpers, and template events.

解决方案

It's not particularly pretty, but I've done something like this:

<template name='forLoop'>
{{#each augmentedParticipants}}
{{> participant }}
{{/each}}
</template>

<template name='participant'>
...
Question: {{this.parent.question}}
...
</template>


// and in the js:
Template.forLoop.helpers({
    augmentedParticipants: function() {
        var self = this;
        return _.map(self.participants,function(p) {
            p.parent = self;
            return p;
        });
    }
});

It's similar to the approach that AVGP suggested, but augments the data at the helper level instead of the db level, which I think is a little lighter-weight.

If you get fancy, you could try to write a Handlebars block helper eachWithParent that would abstract this functionality. Meteor's extensions to handlebars are documented here: https://github.com/meteor/meteor/wiki/Handlebars

这篇关于在 Meteor 模板和模板助手中访问父上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！