如何将这两个 CoffeeScript 片段组合成一个有效的文件？

Question

所以我有两个独立工作的片段：

$ ->
    $('[data-provider="summernote"]').each ->
      $(this).summernote
        height: 300

还有这个：

$ ->
  companySelect = $('#company-select')
  jobFields = $('#job-fields')
  companySelect.change ->
    # if selected option is the first option
    if $(this).find('option:selected').index() == 1
      jobFields.show().find(':input').prop 'disabled', false
    else
      jobFields.hide().find(':input').prop 'disabled', true
    return
  # call change immediately so this still works when already updating and not just creating.
  companySelect.change()
  return

鉴于这两个片段管理 Jobs#Views 中的两件事，我想将它们合并到我的 jobs.coffee 文件中。

但我不太确定如何将它们放在同一个文件中，这样它们就可以在不相互干扰的情况下工作。

我尝试了一些东西，但由于我并不真正完全理解 CoffeeScript，所以我确定我做错了，所以没有用。

编辑 1

鉴于@Uzbekjon 给出的以及他对这个问题的回答，这就是我的合并文件现在的样子：

ready = ->
  $('data-provider="summernote"]').each ->
    $(this).summernote(height: 300)

$(document).ready(ready)
$(document).on('turbolinks:load', ready)


companySelect = $('#company-select')
  jobFields = $('#job-fields')
  companySelect.change ->
    # if selected option is the first option
    if $(this).find('option:selected').index() == 1
      jobFields.show().find(':input').prop 'disabled', false
    else
      jobFields.hide().find(':input').prop 'disabled', true
    return
  # call change immediately so this still works when already updating and not just creating.
  companySelect.change()

我现在收到这个错误：

ExecJS::RuntimeError at /jobs/new
SyntaxError: [stdin]:10:1: unexpected indentation

Answer 1

确保将文件命名为 jobs.js.coffee（不要伪造 js）。此外，spacing/tabs 很重要，因此请确保您没有 indent/unindent 代码的一部分。

$ ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      height: 300

  companySelect = $('#company-select')
  jobFields = $('#job-fields')
  companySelect.change ->
    # if selected option is the first option
    if $(this).find('option:selected').index() == 1
      jobFields.show().find(':input').prop 'disabled', false
    else
      jobFields.hide().find(':input').prop 'disabled', true
    return
  # call change immediately so this still works when already updating and not just creating.
  companySelect.change()

编辑 1：

根据您的编辑和评论。您在第 10 行和第 11 行有无意的缩进。

jobFields = $('#job-fields')
companySelect.change ->

此外，您可能希望在 ready 回调中有这样的行为：

ready = ->
  # Setup "summernote" editor
  $('data-provider="summernote"]').each ->
    $(this).summernote(height: 300)

  # Company selector
  companySelect = $('#company-select')
  jobFields = $('#job-fields')
  companySelect.change ->
      # if selected option is the first option
      if $(this).find('option:selected').index() == 1
        jobFields.show().find(':input').prop 'disabled', false
      else
        jobFields.hide().find(':input').prop 'disabled', true
      return
    # call change immediately so this still works when already updating and not just creating.
    companySelect.change()

$(document).ready(ready)
$(document).on('turbolinks:load', ready)

如何将这两个 CoffeeScript 片段组合成一个有效的文件？

How do I combine these two snippets of CoffeeScript into 1 file that works?

javascript

ruby-on-rails

coffeescript

asset-pipeline

ruby-on-rails-5

编辑 1：