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

What is Framer? Join the Community
Return to index
Chase Curry
Posted Apr 09 - Read on Facebook

Hi all,

Is there a simple way to create multiple instances of a single object? e.g. I've created a panel that reduces its opacity to 0.5 when hovered on, and would like to populate the screen with 9 of these panels. Is there something akin to Panel1 = new Panel (where Panel is an object I've defined)? I noticed a few examples where ppl used for loops and defined the object inside of the loop.... seems to come close, but could be a bit messy.

Thanks!

25 Comments

Jordan Robert Dobson

There is a copy() method I believe.

Josef Richter

would be interested too, especially how to extend classes - e.g. class RedLayer extends Layer and set backgroundColor: "red", so that I don't need to do this manually, just instantiate new RedLayer. What is the proper syntax for this?

Ondrej Rohoň

Have a look here guys: http://arcturo.github.io/library/coffeescript/03_classes.html

Coffee script, which framer uses by default is super nice for this.

Josef Richter

I tried and failed :-) That's why I'm asking what's the correct syntax.

Mike Feldstein

class RedLayer extends Layer
constructor:(options = {}) ->
super(options)
@backgroundColor = "red"

Ondrej Rohoň

I made you an example project, which should make it clearer. Feel free to ask any questions :) http://share.framerjs.com/tftsaty7efz2/

Jordan Robert Dobson

Oh. I misunderstood the question. Sorry. Mike Feldstein has you on track.

Josef Richter

Thanks Mike and Ondrej. Was able to get this far, but where I failed was when I tried the extended class to have some default values, while still be able to redefine them. I.e. class BigFatRedLayer extends Layer would have some default width&height = 1000 and default red background, but I still want to be able to specify any of these properies on init. That means e.g. new BigFatRedLayer with width = 1200 while keeping the other default values. Makes sense?

Ondrej Rohoň

Yes, it makes sense, I don't know right away how to do that. Will have look at it.

Mike Feldstein

Josef Richter try this little guy on http://share.framerjs.com/uq821f0bczt1/

Mike Feldstein

||= means set it if it doesn't exist

Josef Richter

Mike this is EXACTLY that kind of "one liner" solution I was hoping for, thanks! I was fiddling around with the ? operator, but I fucked up the syntax probably. Thanks!

Mike Feldstein

Only gotcha is that if someone sets the value to 0 ||= will overwrite it

Mike Feldstein

you could also check if it's undefined, but the basic idea is to overwrite unset properties before calling super

Jordan Robert Dobson

Mike Feldstein I think the proper coffeescript way is ?=

Jordan Robert Dobson

That checks for null and says if null make it set to your Val.

Jordan Robert Dobson

@options.width ?= 200

Mike Feldstein

with our powers combined....

Jordan Robert Dobson

The null check is awesome because it doesn't overwrite a falsely value. :D

Jordan Robert Dobson

We are Captain Planet!!!!

Mike Feldstein

does it overwrite null? Because that's a valid value... I kinda hate the way javascript treats null/undefined/false/0 and i really don't understand coffeescripts treatement of javascripts treatment.

Mike Feldstein

wait i think that comment means i need to go outside.

Jordan Robert Dobson

Sorry. I guess it checks for undefined and null. Basically if it's set to anything of value true or false the ? Doesn't pass. So it's checking for an empty value.

Chase Curry

Thanks all- on a deadline this AM, but will check this out this afternoon

Jordan Robert Dobson

http://coffeescript.org/#operators

Check out "The Existential Operator" for examples...

It's a little difficult to check for the existence of a variable in JavaScript. if (variable) ... comes close, but fails for zero, the empty string, and false. CoffeeScript's existential operator ? returns true unless a variable is null or undefined, which makes it analogous to Ruby's nil?

It can also be used for safer conditional assignment than ||= provides, for cases where you may be handling numbers or strings.

Read the entire post on Facebook