2

I want to manage part of my layout with coffeescript. I have a left/right panel and I want to be able to switch between them. I have created something like this:

window.switchPanel = (panel = 'left', action = 'toggle') ->

  open = (panel) ->
    ...

  close = (panel) ->
    ...

  toggle = (panel) ->
    ...

My question is, how do I structure this so that I can call open/close/toggle by the action variable and can I use something so that I don't have to pass in the panel to every child function? Perhaps @panel?

Improve this question
1
  • Since you're going to pass the action name, why not just attaching the functions directly to window (or on an panel object attached to the window)? You have 1 function name + 2 non optional action names, I think it's not a lot better then 3 function names Commented Nov 8, 2012 at 10:41

2 Answers 2

Reset to default
4

I think you just want to throw your functions into an object so that you can access them by name:

window.switchPanel = (panel = 'left', action = 'toggle') ->
  funcs =
    open: (panel) ->
      ...
    close: (panel) ->
      ...
    toggle: (panel) ->
      ...

Then you can simply funcs[action](panel) inside switchPanel. If you don't want pass panel into the functions then you don't have to, they'll have access to panel simply by being defined within switchPanel:

window.switchPanel = (panel = 'left', action = 'toggle') ->
  funcs =
    open: ->
      ...
    close: ->
      ...
    toggle: ->
      ...

Then you'd just funcs[action]() and they could do what they like with panel.

Demo: http://jsfiddle.net/ambiguous/UV42x/

Some reading on JavaScript closures would clarify what's going on in the second version.

You might want to include an if(action !of funcs) check to make sure you don't try to use a bad action. Or, as Aaron Dufour notes in the comments, you could funcs[action]?() if you only need to check that action is valid once.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Instead of your check if action !of funcs, you could use funcs[action]?(), which is a bit more coffeescript-y. Also, its worth noting that the action functions have access to panel via a closure, in case OP wants to learn more about how that works.
@AaronDufour: Depends what you want to do if action isn't there. If you just want to ignore it then funcs[action]?() works but if you want to produce an error message or return immediately to avoid further action checks then an if ... !of would be better. But yeah, adding the closure terminology would make sense.
0

Few things:

1) I think you're creating obvuscated architecture by selectively calling methods within the object based on an input to the object. It begs the question "Why even create the methods? Why not just use a big IF ELSE IF type structure?" But others would disagree with me.

2) This is one of the confusing circumstances of CoffeeScript. You're dealing with something that would normally be clear if wrapped in explicit braces. I don't like javascript's crazy use of anonymous function wrappers everywhere, but I do believe in bracketed code. I defer to point 1. I think you're just making things more complicated by doing it this way.

3) Have you studied how coffeescript transforms the 'this' keyword? I'm pretty certain CoffeeScript does some kind of smart transformation on 'this' that deviates from standard javascript, which will mean nobody can answer this question for you except Coffee users. It won't be the same as javascript. Its relevant because in order to access 'panel' in the methods without passing it explicitly, you would need to use 'this.panel' or some other dereferencing mechanism to access the panel member from within one of the methods. I can't tell you how, but this information my help steer you in the right direction. The issue at hand is clearly a question of how to reference object members.

Improve this answer

4 Comments

I'm separating the blocks into functions because toggle, for example, will make use of both open/close functions. It is to DRY up the code.
I suppose I could wrap the function calls in if/else statements. Either way, that isn't the question. Thanks for the input anyway.
Point 1: I think it's nicer and easier to maintain by using an object referencing functions than a massive if else if. Points 2 and 3 looks wrong to me, the question would be pretty much the same for pure javascript
3: This question doesn't have anything to do with the this variable, so I'm not really sure what you're getting at here. panel shouldn't be an object member if its only relevant within a single function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.