Coffeescript Private functions scoping, accessing constructor variables and Inheritance

The other day I came across a task on refactoring some common coffeescript into class - object oriented, I'm not very pro and learned a lot through research of 2-3 days leading to a mayor conclussion about scoping: IT IS A MESS for noobs like me.

Any way, I solved some problems where inheriting was essential

First we create our view class

class FolderView
  constructor: (@id , @nme) ->

Then we need to add it some JST for template rendering and create our inner html object

class FolderView
  constructor: (@id, @nme) ->
     @template: "path/to/jst"        
     @folder_view = folder_html(@id, @nme, @template)


  folder_html = (id, name, path ) ->
    $(JST[path](id: id, name: name))    #this will return the html necesary to use our folder in the view
  insert: ->
    $("table").append(@folder_view)


folder = new FolderView 1, "myfolder"
folder.insert()

This will insert our new folder generating it via JST into the content of the page, but theres something wrong here... what if we want to inherit its methods/properties?

we cant do:

folder_html = (id, name, path)->
  super

because it is a function only present inside the scope of the main class, then what if we wanted to play the template path as a global property? al that leading to this:

class FolderView
  constructor: (@id, @nme) ->
    @folder_view = FolderView.folder_html(@id, @nme)

  template_path: "path/to/jst"

  @folder_html: (id, name)->
    @template()(id: id, name: name)

  @template: ->
    JST[@prototype.template_path]

  insert: ->
    $("table").append(@folder_view)


folder = new FolderView 1, "myfolder"
folder.insert()

As you can see we added @ to some of the functions, this makes refference to "this" as we know for common coffeescript, but what does that mean?, it means they become "private" or part of the prototypal class FolderView scoping them, thats why we call the method outside the scope of @template and @folder_html as:

FolderView.folder_html(@id, @name)

now.. why do this?, cant we just leave them as common functions? as we know they would become a common:

folder_html = function(){ ....code.... }

but then we could not play inheritance and would become repetitive code, and as we know, thats not very classy feels like a sir

so under inheritance we want to create a form view to create our folders at the view, so will make this:

class NewFolderView extends FolderView
  constructor: (@parent_folder_id) ->
    @folder_view =  FolderView.folder_html(@parent_folder_id)

  template_path: "path/to/new_jst"

  @folder_html: (parent_id) ->
    @template()(parent: parent_id) #heres the point

So here's our point of the article, as we know inheritance means all our parents can do, we can!!
this means when we extend the FolderView class all its properties are inherited to the children:

@template: ->

allows us to call it as prototypal method in the class, inheriting it to any class it is extent to!! and:

@template: ->
  JST[@prototype.template_path]

allows us to call the new template_path declared under NewFolderView because we want a "new" template with a form, not the resulting named and with id using @prototype."property"

this may have some issues or may be easyer acomplished but the main concern was the fact that scoping needs to be understood realy well before adventuring into more complex stuff in coffeescript, mostly with low knowledge in pure javascript like myself

template_path = "path/to/template" 

@prototype.template_path

template_path = "path/to/template"

@template: ->

FolderView.template = function() {
    return JST[this.prototype.template_path];
};

NewFolderView.prototype.template_path = "path/to/new_folder_view";
FolderView.prototype.template_path = "path/to/folder_view

NewFolderView.folder_html(parent_id)