Skip to main content

Coffeescript Instantiation

Javascript • Asked by Chris Zempel

I've got a bunch of images thumbnails in an admin area. Wherever one appears, I'd like to be able to click on it, open up a modal with a form, and let the attributes of the image be edited from that form.

To start, I'd first just like to be able to pop open the modal when somebody clicks on a thumbnail, but I'm running into an issue where I'm not sure what's wrong.

thumbnail html:

<div class="col-xs-6 col-md-3" data-behavior="image-thumbnail" data-image-id="1">
  <div class="thumbnail">
     <img class="attachment image file" src="blahblah" alt="Screen+shot+2015 05 29+at+10.29.10+pm" /> 
  </div>
</div>

.erb template for an individual image thumbnail

<div class="col-xs-6 col-md-3" data-behavior="image-thumbnail" data-image-id="<%= image.id %>">
  <div class="thumbnail">
     <%= attachment_image_tag(image, :file, :fill, 300, 300) %> 
  </div>
</div>

images.js.coffee

class Thumbnail
  contructor: (item) ->
    console.log "contructor"
    @thumbnail = item
    @setEvents()

  setEvents: ->
    @thumbnail.on "click", @revealModal

  revealModal: =>
    console.log "wow"
    $("[data-behavior='image-thumbnail-modal']").modal('show')

jQuery ->
  console.log "ready"
  new Thumbnail $("[data-behavior='image-thumbnail']")

alternately, I've tried instantiating the coffeescript objects like this:

  $.map $("[data-behavior='image-thumbnail']"), (item, i) ->
    new Thumbnail(item)

The console logs "ready," but I never make it into the constructor. Where am I going wrong here?


omg...

 contructor: (item) ->

should be

  constructor

:'( :'(


Haha! Always the simplest things producing the hardest problems.


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.