Dan LeGrand

@excid3:disqus: do you happen to know of any places for examples of using singleton classes like this for handling jQuery event handlers, etc...? I've spent a better part of my morning searching for ways to cleanup event handler code (aka, the jQuery "spaghetti code") into CoffeeScript classes, but didn't have much success.

I'm implementing my CoffeeScript code as singleton classes that operate on the DOM with interactions/events, but haven't really found good examples of this being done in a real application so I wanted to get some research before I jumped into a solution that later turns out to be a bad idea.

Just curious if you came across any good examples when you were making this screencast.

Released an Alpha version of Google's Material Design using SCSS: https://github.com/dlegr250...

Very much a work-in-progress, I basically extracted the code from a current project I'm building so I could use it in multiple projects at the same time and refine it. Will be several months before it's production-ready for the general public, even though I'm currently using it in production systems myself.

One thing I did have to do not covered in the video was update the <name_of_your_gem>.gemspec file and put in "real" text for some of the placeholders. When I ran "bundle" it actually threw a validation error, but was easy enough to fix.

I was pretty amazed at how easy that actually was and that it worked with about 15 min of work. Now I have 1 codebase to maintain interface code instead of multiple projects with copied/pasted code. Very cool.

@excid3:disqus: I really like the idea of using JavaScript objects to represent elements on the DOM. I implemented something very similar with menus instead of todos and it works well except for 1 issue I ran into.

When you call:

$.map $("li"), (item, i) ->
  new Todo(item)

This only works on elements currently on the DOM. If you create a new todo with AJAX, that new todo will not have this functionality and you will have to do something like:

# app/views/todos/create.js.erb (JS off top of my head, so may be issues...)
$("#todos").append( $("#todo-<%= @todo.id %>") );
  new Todo( $("#todo-<%= @todo.id %>") );

If we got rid of the JavaScript class and instead went with straight jQuery, we could benefit from using the "on" method which is "live" with jQuery and operates on dynamic elements as well.

# app/assets/javascripts/global.js.coffee (using turbolinks)
$(document).on "ready page:load", ->
  $("li.todo")children("input[type='checkbox']").on "click", ->
    # handleToggle method code...

This should apply the JavaScript logic to any newly-created todo items, I believe.

However, this "solution" loses all the power of using object-oriented-like programming with JavaScript classes to represent the DOM.

Do you have any thoughts on a solution to that kind of problem?

Only other thing I can think of so far is listening for whenever a new "li.todo" element is somehow added to do the DOM and attach the event handlers there, but I'm not sure if it's possible to capture a "new element" event.

Chris, I'm really enjoying your screencasts but would like to make one suggestion; could you post the video file size for the episodes? I recently found myself on a mobile device with some time to kill and wanted to watch one of the episodes, but couldn't find a good way to tell how large the file was and wasn't sure if it would have eaten up all my monthly data or not. It's not a situation I find myself in often, but since I was in that position myself I figured I'd pass it along.

Thanks for putting so much hard work into your screencasts; I've enjoyed pretty much all of them and am looking forward to many great episodes!

Thanks,
A happy subscriber