How to get current data context of list view when some textbox change?

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)?

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

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

Please example for me.

I need more code to give you a valid solution.

1 Like

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
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 :frowning:

1 Like

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

Look great :smile:
Thanks a lot for your helping.

1 Like