Meteor - 将数据从模板传递到事件，点击按钮

Question

我有一个场景，管理员能够批准或拒绝用户加入我系统中特定模块的请求。因此，我使用帮助程序在 Modules Collection 中查找 Admin 管理的所有模块，并列出每个模块的每个请求，并带有一个 Approve 按钮和一个 Reject 每个请求按钮。

模块集合

{
  "_id": "hcHJW2A8g8QoqvPmC",
  "year": "1",
  "courseId": "5aaeca852edb669c9e4b456a",
  "moduleName": "System Analysis",
  "logo": "https://ijnet.org/sites/default/files/images/migrate/2010-09-29/25647.jpg",
  "requested": [
    {
      "name": "aor88"
    },
    {
      "name": "Create"
    }
  ],
  "rejected": [],
  "approved": [],
  "admin_id": "Ad6emWNAqZY2oYneW"
}

模板 > admin.html

<template name="admin">
<br><br>
{{#if modules}}
            {{ #each module in modules }}

             <div class="row">
                 <h4 id="modulename" >{{module.moduleName}}</h4>
                <div class="col-md-4 col-sm-6">

                    {{ #each request in module.requested }}
                    <div class="card-style">
                        <div class="media">
                            <div class="media-body">
                                <h4 id="username">{{request.name}}</h4>

                                <input type="submit" title="Reject" id="rejectScenarioButton"  value="Reject"/>

                                <input type="submit" title="Approve" id="approveScenarioButton"  value="Approve"/>


                            </div>
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div> 

            {{/each}}
{{else}}
                <h1>There is currently no join requests</h1>
{{/if}}
</template>

helpers> admin.js

Template.admin.helpers({

    modules: function() {
        modules = Modules.find(
        {
            admin_id: Meteor.userId()
        },
        {
            requested:{
                $exists: true, 
                $not: {$size: 0} 
            }
        },
        {
            sort: {moduleName:-1}

        }
        );

      return modules

    }

})

这一步的一切都按预期工作。当我尝试使用点击事件处理数据时，就会出现我的问题。我正在尝试提取模块名称和用户名，然后在我的点击事件中处理它们。所以在下面的示例中，我期望 this.name 返回用户名，但它返回未定义。

事件>admin.js

Template.admin.events({

    "click input[type=submit]": function(e, t) {
        if ($(e.target).prop("id") == "approveScenarioButton") {

            console.log(this.name);                   


                return false
        } else if ($(e.target).prop("id") == "rejectScenarioButton") {


        }

    }

})

谁能指出我正确的方向？

Answer 1

在事件处理程序中，this 关键字指向 模板的 数据上下文（如果没有，则指向 window）。管理模板的数据上下文不是单个请求对象。有几种方法可以做到这一点，但从长远来看，创建一个新的 Request 模板并将处理程序附加到那里可能会更好：

{{#each request in module.requested}}
  {{> Request data=request}}                
{{/each}}

请求模板：

<template name="Request">
  <div class="card-style">
    <div class="media">
      <div class="media-body">
        <h4 id="username">{{name}}</h4>
        <input type="submit" title="Reject" id="rejectScenarioButton"  value="Reject"/>
        <input type="submit" title="Approve" id="approveScenarioButton"  value="Approve"/>
      </div>
    </div>
  </div>
</template>

（我建议将提交输入上的 ids 替换为类 - 使用您的事件键中的那些。）

请求模板帮助程序/事件：

Template.Request.events({
  'click input[type=submit]'(e, t) {
    // `this` contains the data from the request object passed into the
    // template during each iteration
    console.log(this.name);
  }
});