Meteor：如何使用模板事件检索“{{this}}-value”

Question

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

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

问题：我无法通过事件检索 {{this}} 值。 Console.log() 正在打印 0。

我的 HTML：

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

我的 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 文件中可以看出，我的最终目标是从数组中删除被点击的用户。

Answer 1

要在子链接点击事件中获取li项的文本，结合使用.parent()和.text()（因为你可以' t 在列表项上使用 .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) 相当于模板中的{{../..}}。

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