如何在每个块 RactiveJS 中的单击事件上调用带有参数的函数？

Question

我正在使用 RactiveJS 1.4.1 和 asp.net mvc core razor 页面。

我将 html 放入页面中的脚本模板中。并在RactiveJS中调用它来渲染。渲染工作正常，但是按钮单击操作，“addToCard”方法不起作用。我尝试将 addToCard 函数移到数据部分下 - 不起作用。我也尝试调用像这样的 addToCard 函数“ractive.on( 'addToCart' ...” 它也不起作用。

这是代码；

@{
    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>

}

我直接从 RactiveJS 文档中获取了这个示例；

https://www.ractivejs.org/docs/latest/proxy-events.html - 但这也不起作用（按钮不显示任何内容）...

@{
    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>

}

我错过了什么？

更新：我可以使用 data- 属性，我知道，但我正在寻找更好的方法来做到这一点。*

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

我不了解 asp.net，所以我还没有测试过它，但你可以这样做：

@{
    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>

}