This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Cemre Güngör
Posted Apr 28 - Read on Facebook

I want to define tap events on 5 different views in a loop. When I'm doing view.on(Events.TouchEnd, function(e) { ... }); how can I access the tapped view inside the function?

e.target gives me the div in the DOM, not the framer view. It also gives the child-most element, not necessarily what I defined the event on?

27 Comments

Mike Meyer

I might be misunderstanding something, but don’t you have access to the tapped view via the `view` variable?

Mike Meyer

How are you looping through the views?

Mark Badger

Here's the code I got given by a not noob

Mark Badger

var _arr = [0, 1, 2, 3, 4, 5];

_arr.map(function(number, i) {
var _mc = new View({ x:500, y:35*i, width:20, height:30 , style:{"background": "yellow", "margin-left":"20" } })
_mc.count = i;
_mc.on('click', function (){
console.log("yellow", i, _mc.getCount(), _mc, _mc.count )
})
})

Mark Badger

_mc will reference the view

Koen Bok

Welcome to closure hell :-/

Aaron Carámbula

For stuff like this I rub a setup function to which I pass a view. See Koen's initial bouncy view code that comes with every framer PS project.

Josh Puckett

As Mike said, you already have view (variable holding the actual Framer view you want) inside your loop presumably; just pass that in to your tap end function, instead of e, and then you'll have access to it.

Cemre Güngör

Nah :( Here's my code

Cemre Güngör

items = [1,2,3,4]
for (k in items) {
var item = items[k]

var thisItem = PSD['Item_' + item]

thisItem.tap(function(e) {
console.log(thisItem.y);
})
}

Cemre Güngör

no matter which item I click on, I get Item_4.y in the console

Koen Bok

Codepen it and ill fix it and explain.

Cemre Güngör

thanks!

Cemre Güngör

Koen Bok codepen here: http://codepen.io/cemre/pen/gCBce

Cemre Güngör

jquery gets by by modifying $(this) inside event functions, wonder how they do it

Tisho Georgiev

Koen, any reason we can't just set the context of the event handler be the view by default? It would avoid a lot of these issues.

Josh Puckett

Cemre: your loop adds a tap listener to each item, but when you call thisItem.y, it returns the y value, which is now static, for the last time you set thisItem in the loop (so the last item in your array, 4). This never changes since the loop has closed, leaving. Basically your code says 'add a tap listener to 4 items, and when any of them are tapped return the value of the 4th/last one.'

Cemre Güngör

Josh Puckett oh. so how could i achieve what i was intending?

Tisho Georgiev

Cemre, here are a couple of options: http://codepen.io/tishogeorgiev/pen/bcqeI?editors=001. If you search for Mark's post from April 4, you'll find a similar problem/solution.

Cemre Güngör

Tisho Georgiev oh man this is so helpful.

Cemre Güngör

thanks jquery for letting me get by for 6 years without understanding javascript fundamentals! :)

Tisho Georgiev

Thank Framer for finally making you learn javascript fundamentals :)

Koen Bok

They beat me to it while I was out :-)

Koen Bok

Seems like Tisho is training an army of javascript designers.

Koen Bok

Tisho: re context I was thinking the same, let's try that out.

Tisho Georgiev

Awesome! Thanks Koen!

Read the entire post on Facebook