Rails应用中CoffeeScript拖拽功能数组声明错误求助

Hey there! Let's work through that CoffeeScript bug in your Rails drag-and-drop setup. I can spot a few syntax and structure issues in your code snippet—let's break them down and fix things step by step.

First, let's identify the key problems: #

• Truncated array push syntax: The line updated_order.push id: $(this)... is incomplete. CoffeeScript requires explicit, properly formatted object literals when pushing to arrays, and the ellipsis here is causing a syntax error.
• Redundant sortable() calls: You're initializing sortable() twice on the same selector—this is unnecessary and can cause unexpected behavior.
• Unnecessary variable initialization: The line ready = undefined set_positions = undefined is redundant in CoffeeScript; variables are automatically hoisted, so you can jump straight to assigning your functions.

Here's the fixed, clean version of your CoffeeScript: #

set_positions = ->
  $('.position').each (i) ->
    $(this).attr 'data-pos', i + 1

ready = ->
  set_positions()
  
  # Initialize sortable once, then bind the update event
  $('.sortable').sortable().on 'sortupdate', (e, ui) ->
    updated_order = []
    
    # Refresh positions and build the updated order array
    set_positions()
    $('.position').each (i) ->
      # Replace `data('id')` with the correct attribute for your model IDs
      updated_order.push
        id: $(this).data('id')
        position: i + 1
    
    # Optional: Send the updated order to your Rails backend via AJAX
    $.ajax
      url: '/your/update/path' # Update this to your actual endpoint
      type: 'PUT'
      data: { order: updated_order }

$(document).ready ready
$(document).on 'turbolinks:load', ready # Add this if you're using Turbolinks

Let's walk through the fixes: #

1. Fixed array push: I completed the object literal in updated_order.push to include both the id (pulled from the element's data-id attribute—adjust this to match how your elements store model IDs) and the new position.
2. Simplified sortable setup: We initialize sortable() once, then chain the on('sortupdate') event binding instead of calling sortable() twice.
3. Cleaned up variable declarations: Removed the redundant undefined initializations—CoffeeScript handles variable scope automatically, so we can define our functions directly.
4. Added Turbolinks support: If your Rails app uses Turbolinks, adding the turbolinks:load event ensures your code runs correctly when navigating between pages.

Quick checks to verify: #

• Make sure each .position element has a data-id attribute (or adjust the id: $(this).data('id') line to match how you're storing record IDs on the element, e.g., $(this).attr('id').split('-').pop() if using Rails' default ID format like item-123).
• Check your browser's developer console for any remaining syntax errors—CoffeeScript compiles to JavaScript, so console errors will point you to any remaining issues.
• Test the drag-and-drop behavior to confirm the updated_order array is being built correctly (you can add a console.log(updated_order) inside the sortupdate handler to inspect it).

内容的提问来源于stack exchange，提问作者script