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

问题描述

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

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

这是有问题的模板:

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

这是投票文件的示例:

{
    _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
        }
    ]
}

这是问题所在……

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

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.

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

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.

关于如何解决此问题的任何建议，而无需求助于DOM操作和jQuery恶作剧?

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

这与AVGP建议的方法类似，但是在助手级别而不是数据库级别上增加了数据，我认为这是一个轻量级的

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.

如果喜欢的话，可以尝试编写一个Handlebars块帮助程序eachWithParent来抽象该功能.流星对车把的扩展记录在这里: https://github.com/meteor/meteor/wiki/Handlebars

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屋！