My template lists “line items” within “my order”
While the object myOrder contains a unique _id, the objects within the array “lineItems” might not have unique attributes:
<template name="receive">
{{#with myOrder}}
<h2 title="Unique Order ID: {{_id}}"></h2>
<table>
{{#each lineItems}}
<tr>
<td class="col-md-2">{{item_code}}</td> // not a unique code
<td class="col-md-4">{{item_description}}</td> // not a unique name
<td class="col-md-2">{{item_quantity}}</td>
<td><button class="btn btn-default" id="button" >Edit</button></td>
</tr>
{{/each}}
</table>
{{/with}}
</template>`
I would like to be able to edit a line item by clicking the button on the table
In order to edit the correct line item, I need to identify it uniquely within the array lineItems.
The value this.index returns undefined
I was thinking of using the {{@index}} attribute / value that exists on the template - perhaps by passing it back into a custom data attribute:
<td><button class="btn btn-default" id="button" data-index="{{@index}}" >Edit</button></td>
However, this seems regressive and not the ‘Meteor way’. Besides which, as I slowly switch to React, this does not seem future-proof.
Template.myOrder.events({
'click .#button': function (e) {
console.log('clicked edit')
console.log(this.index); // returns undefined
console.log($(e.target).data("index")) // returns the index, but is this the best approach?
}
})
Any suggestions as to the correct approach here?
