Question

我有一个方案，管理员可以批准或拒绝用户加入我系统中特定模块的请求。因此，我使用帮助程序查找管理员在模块集合中管理的所有模块，并列出每个模块的每个请求，并带有一个批准按钮和一个按钮拒绝每个请求。

模块集合

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

模板＆gt; 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>

助手＆GT; 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返回用户名，但它返回undefined。

事件＆GT; 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关键字指向模板的 datacontext（如果没有，则为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>

（我建议用类替换提交输入中的id - 使用事件密钥中的那些。）

请求模板助手/事件：

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

Meteor - 通过按钮点击

1 个答案: