在单独的JS文件中引用Coffeescript事件

Question

Basically I already have a piece of coffeescript that animates a drop down menu:

menu_in  = -> $('.cart_pulldown').slideDown(250)
menu_out = -> $('.cart_pulldown').slideU(150)

$('#store_menu').hoverIntent(over: menu_in, out: menu_out, timeout: 150)

And I want to tie this to the add-to-cart-button action so that the menu slideDown/slideUp sequence happens when a user adds to their cart, heres that js code:

function set_product_page_variant_state() {
var varel = $('div#product-social-links');
var cart_link = $("#add-to-cart-button");
if(varel && cart_link) {
  if(variant_id = varel.attr('data-variant-id')) {
    $.post('/flash_sales/get_state.json', {'variant_ids[]': [variant_id]}, function(data) {
      var state = data[variant_id];
      if(state) {
        if(state=='on_hold') { 
          cart_link.text("On Hold").show();
        } else if(state=='in_my_cart') {
          // TODO: this is funking ugly and slow to load, this whole thing needs a good old fashion refactorin'.
          cart_link.text("In My Cart")
            .hide()
            .after("<a href='/cart' class='action-button add_to_cart' id='#add-to-cart-button'>In My Cart</a>")
            .remove()
        } else if(state=='available') {
          cart_link.removeAttr('disabled').show();
        } else if(state=='sold_out') {
          cart_link.text("Sold Out").show()
        } else {
        // something went wrong, enable the button
          cart_link.removeAttr('disabled').show()
        }
      } else { cart_link.removeAttr('disabled').show() }
    }); 
  } else { cart_link.removeAttr('disabled').show() }
 }
}

and just to be thorough, here is the associated html:

 <div id="cart-form">
                   <%= form_for :order, :url => spree.populate_orders_url do |f| %>
                     <div id="inside-product-cart-form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                       <% if @product.price %>
                         <div>
                           <div class="add-to-cart">
                             <%= hidden_field_tag "variants[#{@variant.id}]", 1 %>
                             <%= button_tag "Add to Cart", :class => "hidden action-button add_to_cart", :type => :submit, :disabled => true, :id => "add-to-cart-button" %>
                           </div>
                         </div>
                       <% end %>
                     </div>
                   <% end %>
                 </div>

Any advice is greatly appreciated, thanks in advance!

Answer 1

You can use jQuery delegate events in your Coffeescript file. For example, to show the menu for 500ms before triggering menu_out :

$(document).on 'click', '#add-to-cart-button', (event) ->
  menu_in()
  setTimeout 500, menu_out

Answer 2

由于CoffeeScript将您的代码放在一个闭包中，因此您需要手动将全局变量附加到窗口，例如window.menu_in = -> ...