I m 采用RactiveJS 1.4.1 和p.net mvc 核心raz页。
我在网页上将“html”放在了一个文字上。 并要求RactiveJS这样做。 “ToCard”方法没有使用。 我试图在数据栏下增加ToCard功能,而不是发挥作用。 我也试图将ToCard的职能称为“活跃的......”(添加“ToCart......”)。 它也没有工作。
这里是法典;
@{
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文件; 但是,这并不奏效(但并未显示任何情况)。
@{
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);
}
}
});