使用 Meteor 时如何正确地限定嵌套的#each Spacebars 迭代器？

Question

我有这些嵌套迭代器：

<ul class='detailViewList'>
    {{#each detailsCollection}}
    <li id={{_id}} class='detailViewEntry {{checkboxStatus}}'>
        <input type="checkbox" class='detailCheckbox'>
        <b>{{detail}}</b>
        <div class="btn btn-xs btn-danger" id="delete-detail">x</div>
        <form class='form-inline'>
            <div class="form-group">
                <input type="text" id='{{_id}}' name='message' class="form-control" placeholder="message">
            </div>
        </form>
        {{#each messagesCollection}}
            {{#if isMessageForThisDetail}}
                {{message.message}}
            {{/if}}
        {{/each}}
    </li>
    {{/each}}
</ul>

而且我知道我可以通过 handlebars 路径从子模板访问父属性，从 docs:

{{./name}} or {{this/name}} or {{this.name}}

但我需要我的助手 isMessageForThisDetail 将当前迭代的 messageCollection 的属性与当前迭代的父级 detailsCollection 进行比较。我的助手看起来像这样：

isMessageForThisDetail: function(){
    var message = messagesCollection.findOne({detailId: this._id});
    if(message != undefined){
        return this._id == message._id;
    } else {
        console.log('there is no message for this detail');
    }
}

但是 this._id 的上下文是消息，而不是 _id 我想将消息的某个字段与之进行比较的详细信息。

Answer 1

您应该可以像这样访问 parent data：

isMessageForThisDetail: function() {
    var detailId = Template.parentData(1)._id;
    var message = messagesCollection.findOne({detailId: detailId});
    if(message)
      return this._id === message._id;
    else
      console.log('there is no message for this detail');
}

Answer 2

我遇到了类似的问题，发现 Template.parentData() 方法目前在事件处理程序中不起作用（请参阅 https://github.com/meteor/meteor/issues/5491）。用户 Lirbank 发布了这个简单的解决方法：

将数据从外部上下文传递到同一模板中内部上下文中的 html 元素：

{{#each companies}}
  {{#each employees}}
    <a href="" companyId="{{../id}}">Do something</a>
  {{/each}}
{{/each}}

现在可以使用类似

的事件处理程序访问公司 ID

$(event.currentTarget).attr('companyId')

Answer 3

（未验证）

选项 1：

模板

{{#each companies}}
  {{#each employee this}}
    <a href="">{{this}}</a>
  {{/each}}
{{/each}}

帮手

var templateHelpers = {
    companies: function () {
    // array of companies
        return arrayOfCompanies;
    },
    employee: function (company) {
        var companyId = company.id;
         // do something with companyId
    }
}

选项 2：

模板

{{#each companies}}
  {{#each employee this.id}}
    <a href="">{{this}}</a>
  {{/each}}
{{/each}}

帮手

var templateHelpers = {
    companies: function () {
    // array of companies
        return arrayOfCompanies;
    },
    employee: function (companyId) {
         // do something with companyId
    }
}

使用 Meteor 时如何正确地限定嵌套的#each Spacebars 迭代器？

How Do I Properly Scope Nested #each Spacebars Iterators When Using Meteor?

javascript

meteor

spacebars