事件指令中的受限引用

Question

我显示了 post 的集合。我想在悬停时显示 post 的某些特定元素，在悬停时隐藏它。

我希望受限制的引用可以帮助我，所以这是我尝试过的：

{{#each Posts}}
  <form on-mouseover="set('.PostIsHovered', true)" on-mouseleave="set('.PostIsHovered', false)">
    <label>{{Text}}</label>
    {{#if .PostIsHovered}}
    <input type="submit" value="Submit" />
    {{/if}}
  <form>
{{/each}}

这是一个演示：http://jsfiddle.net/mq197dox/2/但是它不起作用。

如果我将 .PostIsHovered 更改为 PostIsHovered 它有点管用，但是当我悬停一个 post 时，所有 post 的提交按钮都会出现（这很有意义不是受限参考）。

Answer 1

您必须使用具有事件处理方法样式的完整键路径(http://jsfiddle.net/mq197dox/3/):

{{#each Posts}}
  <form on-mouseover="set(@keypath + '.PostIsHovered', true)" on-mouseleave="set(@keypath + '.PostIsHovered', false)">
    <label>{{Text}}</label>
    {{#if .PostIsHovered}}
    <input type="submit" value="Submit" />
    {{/if}}
  <form>
{{/each}}

事件指令中的受限引用

Restricted reference in event directive

ractivejs