Question

我无法弄清楚为什么这个Bootstrap模式会收到错误的数据上下文。

让我们从我的模板开始（暂时不包括模态）。第一个遍历由itemsList提取的项目列表：

<template name="CategoryItems">
  <ul>
    {{#each itemsList}}
      {{> Item}}
    {{/each}}
  </ul>
</template>

顺便说一下，

itemsList看起来像这样：

itemsList: function() {
    return Items.find()
  }

内部模板Item详细说明了这些项目的显示方式：

<template name="Item">
  <li>
    <span class="item-name">{{name}} </span>
    <a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal">
      <span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
    </a>
    {{> EditItemModal}}
  </li>
</template>

所以基本上它显示从数据库中提取的项目的名称，然后提供一个打开edit-item-modal的编辑按钮。模态本身放在这里（它默认是隐藏的），以便它获得正确的数据上下文，但这似乎不起作用。

单击编辑链接时，模式将打开。排除很多标记，它看起来像这样：

<template name="EditItemModal">

  <div class="modal fade" id="edit-item-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <h4>{{name}}</h4>
  </div>
</template>

但name始终显示我列表中的第一项的名称，忽略我实际点击的内容。

但是，一个非常奇怪的事情是，如果我在模态中包含一个辅助检查，就像这样，

<template name="EditItemModal">
  {{checkDataContext}}  
  //the other stuff
</template>

并使帮助器看起来像这样，

Template.EditItemModal.helpers({
    checkDataContext: function() {
        console.dir(this)
    }
})

然后，一旦我加载页面，所有正确的项目都会在控制台中吐出。

这里发生了什么？

Answer 1

您的模态标记只定义了所有模态之间的一个共享ID，这不是有效的HTML，最终成为问题的根源。

当你点击触发模态的任何按钮时，它会显示它在你的标记中找到的第一个模态，它总是恰好是第一个模式。

您需要使用商品ID装饰模态ID（因为它们来自Mongo.Collection），您的标记将不再包含重复的模态ID，您的代码将按预期运行。

<template name="EditItemModal">
  <div class="modal fade" id="edit-item-modal-{{_id}}" tabindex="-1" role="dialog" aria-hidden="true">
    <h4>{{name}}</h4>
  </div>
</template>

<template name="Item">
  <li>
    <span class="item-name">{{name}} </span>
    <a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal-{{_id}}">
      <span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
    </a>
    {{> EditItemModal}}
  </li>
</template>

模态中的数据上下文错误

1 个答案: