All threads / Coffeescript Instantiation

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?

omg...

 contructor: (item) ->

should be

  constructor

:'( :'(

Haha! Always the simplest things producing the hardest problems.

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.