如何将HTML页面操作的范围限定为JS/Coffee文件中的唯一UserId

Question

我的应用程序在一个html页面上显示多个人的待办事项列表，每个人都有自己的内联块。

可以有多个用户（不同），但每个人都有一个唯一的待办事项列表。这个列表可以显示他们所有的待办事项，或者一个子集（即个人、工作等）。

在应用程序中，每个人都是一个Mongo文档，其中包含一组todo（嵌入与引用以提高性能）。以下是基本模型：

People.insert({
    name: "Joe",
        todos: 
        [{
        id: Random.id(),
        description: "Pick up Flowers",
        list: "Home"
        },
        {
        id: Random.id(),
        description: "Complete this task.",
        list: "Work"
        }})

用户的集合被传递给{#each}}助手，其中用户{{name}}和他们的todo列表都有自己的内联块。每个todo使用呈现

{{#each person}}
    {{name}}
    {{#each this.todos}}
        {{description}}
    {{/each}}
{{/each}}

每个用户都有一个下拉菜单，可以在其中切换列表（即工作或家庭）。参见代码：

<select id="{{_id}}-Toggle" class="toggleList">
    <option value = "1">Home</option>
    <option value = "2">Work</option>
</select>

问题如下：

当对用户的列表执行操作时（例如，标记任务完成、添加新任务、删除任务、在列表之间切换等），我似乎无法将其范围扩大到特定用户。（我试着使用Person_Id使DOM Id是唯一的，但后来我不能在我的咖啡文件中使用点击事件来调用它们，因为DOM元素Id是动态的，而我的咖啡档案在Template.event.中无法预先知道它

我还尝试将People_id包含在一个隐藏字段中，但我似乎无法将其唯一地传递到我的coffeescript文件中，因为"id"类将为每个用户复制。参见代码：

<input type="hidden" id="{{_id}}" value="{{_id}}" class="id"/>

以下是下拉菜单的咖啡文件事件的设置方式：

Template.people.events
        'change .toggleList': () ->
            choice = $('.toggleList option:selected').text()
            console.log "You selected #{choice}."
            user = $('.id').val()
            console.log "user is #{user}."

在第一种情况下，我在两个下拉列表中看到两个选定的项目（人员集合中有两个用户）。这是因为我正在选择一个类，它同时选择了这两个类。用户总是抓住同一个用户（同样，可能是在我选择一个类的时候。）

Answer 1

您可以在事件处理程序中引用"this"（请参阅http://docs.meteor.com/#eventmaps)，所以您不需要在模板中放入｛｛_id｝｝s。如果您的select.toggleList是在｛｛#eachperson｝｝｛｝块中呈现的，您可以参考它_处理程序中的id（尽管我建议使用防御性的"self-this"并使用self._id来启动处理程序）。

Answer 2

我认为，就我对问题的理解而言，当change事件触发时，您可以获取选择框的用户ID权限

'change .toggleList': (event)->
  select_box = $(event.target)
  console.log "You selected: #{select_box.val()}"
  console.log "And the user's ID is: #{select_box.attr('id').split('-')[0]}"