0

Probably it's a noobisch question. Currently I'm fiddling with Framer.js. I've got a CoffeeScript question;

types = ["orange", "apple", "banana", "grapefruit", "pear"]
for i in types
    li = new TextLayer
        text: types
        y: li * 60
    li.parent = dropdownList

    print "list-item-" + "#{i}", i

So I've got an Array and I would like to declare an dynamic variable to an object instance. Code above just generates 5 li layers (which is Framer specific > I don't want non-self-explaining layer names within Editor)

So within the for-loop;

var item-orange = new Layer...

var item-apple = new Layer... and so on

How could I accomplish this with CoffeeScript?

myradon
  • 421
  • 1
  • 4
  • 13
  • What "Editor" do you mean? Why don't you use an object (`{ orange: ..., apple: ... }`) for this? – mu is too short Nov 02 '16 at 16:55
  • What is it you want to accomplish? What does `y: li * 60` mean, won't this be NaN? Why do you assign the whole array types as the text? What's the point of that print statement? Can you explain your problem in terms of expected and actual output? – kba Nov 02 '16 at 18:23
  • Probably I should have stripped the rest of the Framer-lingo. Basically every value in array will be add to parent dropdownList with a spacing of 60px vertically. The print function is a way to do console.log in Framer Studio. I was doing some fiddling. With "#{i}" is a way to get values of elements. Framer.js is a prototyping framework with a IDE called Framer Studio. – myradon Nov 03 '16 at 07:59

1 Answers1

0

I'm not sure, but I think what you're trying to do is get a reference to each created layer by name, right? You could do this by storing them in an object under the reference of their name:

types = ["orange", "apple", "banana", "grapefruit", "pear"]

# Create an empty layers object, outside of the loop
layers = {}

# Loop over the types array, storing the type in the variable named type
# And the number of the current loop in the variable index
for type, index  in types
    li = new Layer
        html: type
        y: index * 220
        name: "list-item-#{type}"
    # Store the layer in the layer object under the type key
    layers[type] = li 

    print "list-item-" + "#{type}", layers[type]

# Get a specific layer out of the layers array
layers['apple'].animate
    x: 300

Full example is here: http://share.framerjs.com/5owxrbz5hqse/

Niels
  • 771
  • 5
  • 5
  • Handy such an example. In your example you'll see in Framer Studio every instance is named li. I would like to see them as layer list-item-orange, layer list-item-apple and so on. – myradon Nov 03 '16 at 09:38
  • You can do this by naming the layer explicitly with the `name:` property, I've updated the example to include this. – Niels Dec 05 '16 at 09:01
  • Niels Thank a lot! – myradon Dec 06 '16 at 09:36