@this in iterators

[Craig Kelley]

I'm new to ractive, and have what is hopefully a simple question.  I was playing with the events playground the ractive site, and was trying to understand how to reference the current item in an iterative section:

  {{#each numbers}}

    {{number}}

    <button on-click="@this.subtract( 'number' )">-</button>

    <button on-click="@this.add( 'number' )">+</button>

  {{/each}}

With data set as such in the init code:

  data: {

  numbers: [ { number:0 }, { number:1 }, { number:2 } ]

  }

When run, it properly shows all three numbers with their corresponding values, but the buttons do nothing.  What does @this refer to in the loop?  The buttons work correctly if outside a loop.

Thanks,

  -Craig

[Chris Reeves]

@this is always the ractive instance at that point in the template. You'll be wanting @context, which has the same methods as an instance but is scoped to the data context at the point in the template in which it appears, which allows you to use relative references. Here's an example: https://ractive.js.org/playground/#N4IgFiBcoE5SAbAhgFwKYGcUgL4BoRtIQAeAEwEsA3AAgrIF4AdQpGAczRRYD4SB6SlR5MAdmJIYAxjAoAHFDRQBPOWmaE0ADxT8wKALYIWdRi3QG5ydLzFMU5aiPHcUwYAGI0SKWBqiAVwMAIzQYDBwcO1d7dwA6QJCwyOj7exJggJQUAHtRGjyAWikECikAaw0AASk89B04jADglBgfFAAKAHIEoNCYLoBKXkKBTOy85zTXDKzc-KKSssqWGrrtFDikMjJu3qSB4ZAeAGoxucnUt2B+b18UlwEhKe5H56v3Lx8-UqwH6diwDi-xiDnG8wKomKpQq1VqonqmyaLTaUk6PSGI3OE1EL2msxxkOhyzh6wa212GKOp2x8zx11u3xBTycEn40lkCh4IAIGHg8KwNBgNAY-jQAHcaAAldrUNAdYDRFBsTgoSA0LoeZUcLhdPBKtCWaxodWaixWVBoPXRMioJDqxUueyJfoYdUAbSusX8fTC6oADDR8F63D6DuqAIxB-VO1zAMP9dUAJiDVwAujHpr81TR3TR-XgaBHCym09EoqIcINcEA

Thanks, Chris

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.