流星:如何使用模板事件检索“{{this}}-value”

Meteor: how to retrieve "{{this}}-value" with a template event

本文关键字：this 检索 -value 事件 何使用 流星      更新时间：2023-09-26

注意：完整的代码可以在这里找到：

https://github.com/Julian-Th/crowducate-platform/tree/feature/courseEditRights

问题：我无法使用事件检索 {{this}} 值。控制台.log(( 正在打印 0。

我的网页： 

<!-- Modal to control who can collaborate on a course-->
<template name="modalAddCollaborators">
  <div id="modalAddCollaborators" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Manage Your Collaborators</h4>
      </div>
      <div class="modal-body">
        <form class="form" role="form">
          <ul class="list-group">
            {{#each  addedCollaborators}}
              {{#each canEditCourse}}
                 <li class="list-group-item js-listed-collaborator">{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a></li>
             {{/each}}
            {{/each}}
          </ul>
          <div class="form-group">
            <input class="form-control typeahead" type="text" id="collaboratorName" placeholder="add a collaborator  ..." data-source="courses" autocomplete="off" spellcheck="off">
            <button type="button" id="js-addCollaborator" class="btn btn-success">Add</button>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</template>

我的JS：

Template.modalAddCollaborators.rendered = function() {
    // initializes all typeahead instances
    Meteor.typeahead.inject();
};
Template.modalAddCollaborators.courses = function(){
    return Courses.find().fetch().map(function(it){ return it.author; });
 //return users.find().fetch().map(function(it){ return it.username; });
};
Template.modalAddCollaborators.helpers({
    'addedCollaborators': function () {
        return Courses.find().fetch();
    }
});
Template.modalAddCollaborators.events({
    'click #js-addCollaborator' : function (event) {
        var collaboratorName = $('#collaboratorName').val(); // 
        Courses.update(
           {_id: this._id},
           {$addToSet: {canEditCourse: collaboratorName}}
        );
        $('#collaboratorName').val("");
    },
    'click #remove-collaborator': function (event) {
        var listedCollaborator = $('.js-listed-collaborator').val();
        console.log(listedCollaborator);
        Courses.update(
            {_id: this._id }, 
            {$pull: {canEditCourse: listedCollaborator}}
        );
    }
});

My MongoDB JSON：

{
    "_id" : "j7A3tFdFBn5ECQGwe",
    "title" : "Beatles",
    "coverImageId" : "RERiadyMx8j8C9QQi",
    "author" : "John",
    "keywords" : [ 
        "Paul"
    ],
    "published" : "true",
    "about" : "Testing the Course",
    "canEditCourse" : [ 
        "uo8SMdNroPGnxMoRg", 
        "FLhFJEczF4ak7CxqN", 
        "lkahdakjshdal", 
        "asödjaöslkdjalsöSA"
    ],
    "createdById" : "uo8SMdNroPGnxMoRg",
    "dateCreated" : ISODate("2015-12-28T16:30:34.714Z")
}

如JS文件所示，我的最终目标是从数组中删除单击的用户。

若要获取子链接单击事件中li项的文本，请结合使用.parent()和.text() (因为不能对列表项使用 .val()(：

'click #remove-collaborator': function (event) {
    console.log(event.target);
    var listedCollaborator = $(event.currentTarget).parent().text();
    console.log(listedCollaborator);
    console.log(JSON.stringify(Template.parentData(0)));
    Courses.update(
        { 
            _id: Template.parentData(0)._id, /* or _id: Template.currentData()._id, */
            canEditCourse: listedCollaborator 
        }, 
        { $pull: { canEditCourse: listedCollaborator } }
    );
}

请注意，您可以在事件冒泡阶段到event.currentTarget中使用当前 DOM 元素来引用启动事件的元素。由于元素是锚标记，因此li项为它的.parent()，随后得到它的值与.text()。

至于更新，请使用Template.parentData()获取父_id。在方法中指定一个参数 0，该参数表示要查看的当前数据上下文级别。

例如，Template.parentData(0)等效于 Template.currentData() 。 Template.parentData(2)等效于模板中的{{../..}}。

由于您已将事件处理程序附加到modalAddCollaborators模板，因此this将是该模板的数据上下文，而该模板什么都不是。

只需在要捕获事件的级别设置嵌套模板即可。

此外，使用此模式，您可以直接识别协作者的_id，它将this。但是，课程_id来自parent模板的上下文。(但是，我不确定课程级别数据上下文是高 1 级还是 2 级(。

.html： 

{{#each canEditCourse}}
  {{> nestedTemplate }}
{{/each}}
<template name="nestedTemplate">
  <li class="list-group-item js-listed-collaborator">
    {{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a>
  </li>
</template>

.js：

Template.nestedTemplate.events({
  'click #remove-collaborator': function (event) {
    Courses.update({_id: Template.parentData()._id },{$pull: {canEditCourse: this}});
  }
});
相关文章：