Ask A Question

Notifications

You’re not receiving notifications from this thread.

Coffeescript Instantiation

Chris Zempel asked in Javascript

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?

Reply

omg...

 contructor: (item) ->

should be

  constructor

:'( :'(

Reply

Haha! Always the simplest things producing the hardest problems.

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 78,890+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.