How to call a function with arguments for a button on click event in each block RactiveJS?

Question

I'm using RactiveJS 1.4.1 and asp.net mvc core razor pages.

I put the html to a script-template in the page. And call it in RactiveJS to render. Rendering works fine, but button click action, the method "addToCard" is not working. I tried to move addToCard function under data section - not works. Also I tried to call addToCard function like this "ractive.on( 'addToCart' ..." It not worked too.

Here is the code;

@{
    ViewData["Title"] = "Ractive Examples - ForEach";
}

<div class="card-body">

    <script id="testTemplate" type="text/html">
        <h1>Let's shop!</h1>
        <ul>
            {{#each items: i}}
            <li>
                <p>{{i+1}}: {{description}}</p>
                <label><input value='{{qty}}'> Quantity</label>
                <!-- when the user clicks this button, add {\{qty}} of this item -->
                <button on-click="addToCart:{{this}},{{qty}}" type="button">Add to cart</button>
            </li>
            {{/each}}
        </ul>
    </script>

    <div id="container"></div>

</div>

@section Scripts
{
    <script>
        // Predefined data, items to be added to cart.
        const items_data = [
            { description: "Asset 1", qty: 1 },
            { description: "Asset 2", qty: 21 },
            { description: "Asset 3", qty: 35 },
            { description: "Asset 4", qty: 0 },
            { description: "Asset 5", qty: 5 }
        ];
        
        const ractive = new Ractive({
            el: '#container',
            template: "#testTemplate",
            data: {
                items: items_data
            },
            on: {
                addToCart: function ( event, item, qty ) {
                    // Do something with the item and qty
                    console.log( item );
                    console.log( qty );
                }
            }
        });
        
    </script>

}

I took this example directly from RactiveJS documentation; https://www.ractivejs.org/docs/latest/proxy-events.html - But this is not working too (button displays nothing)...

@{
    ViewData["Title"] = "Ractive Examples - ForEach";
}

<div class="card-body">

    <script id="testTemplate" type="text/html">
        <h1>Let's shop!</h1>
        <ul>
            {{#each items: i}}
            <li>
                <p>{{i+1}}: {{description}}</p>
                <label><input value='{{qty}}'> Quantity</label>
                <!-- when the user clicks this button, add {\{qty}} of this item -->
                <button on-click='addToCart:{{this}},{{qty}}'>Add to cart</button>            
            </li>
            {{/each}}
        </ul>
    </script>

    <div id="container"></div>

</div>

@section Scripts
{
    <script>
        // Predefined data, items to be added to cart.
        const items_data = [
            { description: "Asset 1", qty: 1 },
            { description: "Asset 2", qty: 21 },
            { description: "Asset 3", qty: 35 },
            { description: "Asset 4", qty: 0 },
            { description: "Asset 5", qty: 5 }
        ];
        
        const ractive = new Ractive({
            el: '#container',
            template: "#testTemplate",
            data: {
                items: items_data
            }
        });
        
        ractive.on( 'addToCart', function ( event, item, qty ) {
          console.log( 'Adding ' + qty + ' of ' + item.description + ' to cart');
        });
        
    </script>

}

What am I missing?

Update: I can use data- attribute, i know but I'm searching for better way to do it.*

const ractive = Ractive({
          el: '#container',
          template: `
          <ul>
            {{#each items: i}}
            <li>
                <p>{{i+1}}: {{description}}</p>
                <label><input value='{{qty}}'> Quantity</label>
                <button type="button" data-id="{{i}}" on-click="addToCart">Push me!</button>       
            </li>
            {{/each}}
          </ul>
          `,
            data: {
                items: items_data
            },
            on: {
              addToCart (event) {
                  const id = event.node.getAttribute('data-id');
                  console.log("Item of the id is: " + id);
              }
            }    
        });

Answer 1

I dont know asp.net so I haven't tested it but you could do this:

@{
    ViewData["Title"] = "Ractive Examples - ForEach";
}

<div class="card-body">

    <script id="testTemplate" type="text/html">
        <h1>Let's shop!</h1>
        <ul>
            {{#each items: i}}
            <li>
                <p>{{i+1}}: {{.description}}</p>
                <label><input value='{{.qty}}'> Quantity</label>
                <!-- when the user clicks this button, add {\{qty}} of this item -->
                <button on-click="@this.addToCart({{this}},{{.qty}})" type="button">Add to cart</button>
            </li>
            {{/each}}
        </ul>
    </script>

    <div id="container"></div>

</div>

@section Scripts
{
    <script>
        // Predefined data, items to be added to cart.
        const items_data = [
            { description: "Asset 1", qty: 1 },
            { description: "Asset 2", qty: 21 },
            { description: "Asset 3", qty: 35 },
            { description: "Asset 4", qty: 0 },
            { description: "Asset 5", qty: 5 }
        ];
        
        const ractive = new Ractive({
            el: '#container',
            template: "#testTemplate",
            data: {
                items: items_data
            },
            addToCart: function ( item, qty ) {
                    // Do something with the item and qty
                    console.log( item );
                    console.log( qty );
            }
            
        });
        
    </script>

}

tip: as you see you need the dot before the key to access the key in the {{#each array}} item that is an object. e.g.: (.qty) (.description)