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

Question

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

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

在这个应用程序中，每个人都是一个带有一系列待办事项(嵌入式vs参考性能)的单文档。以下是基本模式：

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

用户集合被传递给{{#各}}助手，其中用户{{name}和他们的待办事项列表都有自己的内联块。提出的每一项待办事项如下：

{{#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

您可以在事件处理程序中引用“此”(请参见http://docs.meteor.com/#eventmaps)，因此不需要在模板中放置{{_id}}。如果您的select.toggleList是在{{#每个人}}块中呈现的，则可以在处理程序中引用this._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]}"