Question

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

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

在应用程序中，每个人都是一个单独的Mongo文档，其中包含一系列待办事项（嵌入式vs性能参考）。这是基本模型：

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}}及其待办事项列表都有自己的内联块。每个使用的待办事项：

{{#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}."

在第一种情况下，我在两个下拉菜单中看到了两个选定的项目（People Collection中的2个用户）。这是因为我正在选择一个班级而且它们都选择了。用户总是抓住同一个用户（再次，就像我选择一个班级一样。）

Answer 1

你可以参考＆＃34;这个＆＃34;在事件处理程序中（请参阅http://docs.meteor.com/#eventmaps），因此您不需要在模板中添加{{_id}}。如果你的select.toggleList在你的{{#each person}}块中呈现，你可以在处理程序中引用this._id（虽然我建议用防御性的方式启动处理程序＆＃34; self = this＆＃ 34;并使用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]}"

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

2 个答案: