theara
March 23, 2016, 11:16am
1
I have list view of order item like this
// Template
<template ...>
{{#each item in items}}
<input name....... class="js-qty" value=item.qty>
<input name....... class="js-pric" value=item.price>
..............
{{/each}}
</template>
// JS
Template.myTpl.events({
'keyup .qty": function(e, t){
console.log(this); // don't work
.............
}
})
How to get current data context of list view (current item)?
theara
March 23, 2016, 11:25am
2
For example
Name - Qty - Price - Amount
A 10 5 $
B 5 10$
.......
When I change the qty
of B
, I want to get current data context
console.log(this);
B - 5 - 10 $
Try Blaze.getData(e.currentTarget)
2 Likes
theara
March 23, 2016, 1:54pm
4
Thanks for your reply, I use Auto Form
{{#each item in items}}
<template name="showItem">
<div class="row list">
<div class="col-sm-4">{{> afQuickField name=... value=item.name class="js-name" readonly="true" label=false}}</div>
<div class="col-sm-2">{{> afQuickField name=... value=item.qty class="js-qty" label=false}}</div>
<div class="col-sm-2">{{> afQuickField name=... value=item.price class="js-price" label=false}}</div>
<div class="col-sm-3">{{> afQuickField name=... value=item.amount class="js-amount" readonly="true" label=false}}</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger js-remove-item">-</button>
</div>
</div>
</template>
{{/each}}
And then I tried
Blaze.getData(e.currentTarget)
// Show
Object {name: "items.1.qty", min: undefined, max: undefined, decimal: undefined, value: 1…}
atts
:
Object
decimal
:
undefined
max
:
undefined
min
:
undefined
name
:
"items.1.qty"
schemaType
:
Number()
selectOptions
:
undefined
value
:
1
__proto__
:
Object
Great, that means now you know the “name” of the field that you are clicking on, which means as long as you are able to access the original top level document of autoform, you can access the property that lives on “items.1.qty” as well.
1 Like
I need more code to give you a valid solution.
1 Like
theara
March 24, 2016, 6:56am
8
I need to get current data of current record for above example.
If I change textbox of B
, so I get
'keyup .name": function(e, t){
// {name: B, qty: 5, price: 10...}
}
By more code I mean, what is your autoform doc property, where it comes from, what is the collection name etc…
1 Like
theara
March 24, 2016, 7:34am
10
Order = new Mongo.Collection("order");
OrderSchema = new SimpleSchema({
orderDate: {
type: Date,
defaultValue: moment().toDate()
},
items: {
type: [Object]
},
'items.$.name': {
type: String
},
'items.$.qty': {
type: Number
},
'items.$.price': {
type: Number,
decimal: true
},
'items.$.amount': {
type: Number,
decimal: true,
}
});
Order.attachSchema(OrderSchema);
<template name="Oreder">
{{#autoForm collection=Order id="Oreder" doc=data type="insert"}}
..............
{{#each item in items}}
<div class="row item">
<div class="col-sm-4">{{> afQuickField name=(keyArgs @index "name") value=item.name class="js-name" readonly="true" label=false}}</div>
<div class="col-sm-2">{{> afQuickField name=(keyArgs @index "qty") value=item.qty class="js-qty" label=false}}</div>
<div class="col-sm-2">{{> afQuickField name=(keyArgs @index "price") value=item.price class="js-price" label=false}}</div>
<div class="col-sm-3">{{> afQuickField name=(keyArgs @index "amount") value=item.amount class="js-amount" readonly="true" label=false}}</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger js-remove-item">-</button>
</div>
</div>
{{/each}}
</template>
//----------------------------------------------------------------------------
Template.Order.helpers({
items: function () {
let getItems = Order.findOne(...);
return getItems;
},
keyArgs(index, name){
return `items.${index}.${name}`;
}
});
Template.Order.events({
'keyup .js-qty,.js-price': function (e, t) {
// how to get current data of current record change...
}
});
First of all, you have a template named “Oreder” but helpers for “Order” and that may be a problem.
Also, where does the autoform doc=data helper come from?
What is the item collection structure?
What is the exact code of getItems
I’m sorry but you seem to omit all the important parts with … and I can’t do anything but guess the problem
1 Like
theara
March 24, 2016, 9:02am
12
Sorry, it is the list view (don’t form)
don't have: {{#autoForm collection=Order id="Oreder" doc=data type="insert"}}
//------------------
{{#each item in items}}
<div class="row item">
<div class="col-sm-4">{{> afQuickField name=(keyArgs @index "name") value=item.name class="js-name" readonly="true" label=false}}</div>
<div class="col-sm-2">{{> afQuickField name=(keyArgs @index "qty") value=item.qty class="js-qty" label=false}}</div>
<div class="col-sm-2">{{> afQuickField name=(keyArgs @index "price") value=item.price class="js-price" label=false}}</div>
<div class="col-sm-3">{{> afQuickField name=(keyArgs @index "amount") value=item.amount class="js-amount" readonly="true" label=false}}</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger js-remove-item">-</button>
</div>
</div>
{{/each}}
Template.Order.helpers({
items: function () {
let getOrder = Order.findOne('001');
return getOrder.items;
},
Hmm, I think if you change
{{> afQuickField name=(keyArgs @index...
to
{{> afQuickField index=@index name=(keyArgs @index...
then
itemIndex = Blaze.getData(e.currentTarget).index
should get you the item index, and then you can do:
item = Order.findOne('001').items[itemIndex]
to get the item object.
2 Likes
theara
March 25, 2016, 12:38am
14
Look great
Thanks a lot for your helping.
1 Like