CODEWITHSUNDEEP
ractivejs
SiberianGuy
SiberianGuy

Reputation: 25312

Restricted reference in event directive

I display a collection of posts. I want to show some specific element of the post when it is hovered and hide it when it is not.

I hoped restricted references could help me with that, so here is what I tried:

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

Here is a demo: http://jsfiddle.net/mq197dox/2/ But it doesn't work.

If I change .PostIsHovered to PostIsHovered it kinda works but when I hover one post the submit button for all posts appears (which makes sense as it is not a restricted reference).

Upvotes: 0

Views: 34

Answers (1)

martypdx
martypdx

Reputation: 3712

You have to use the full keypath with the method style of event handling (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}}

Upvotes: 1

Related Questions