在资产和视图之间共享代码答案

【问题标题】：Share code between asset and view在资产和视图之间共享代码
【发布时间】：2014-06-21 23:56:37
【问题描述】：

我需要在视图中的 .js.coffee 资产文件和 .js.erb 文件中使用一组大约 40 行代码。它为我在页面上加载现有对象（资产文件中的代码）和动态创建新对象（视图中的代码）时使用的对象设置代码。

似乎我不能在资产文件中使用部分，因为它们是静态的。我试图在资产中为代码创建一个函数并在视图中调用它，但视图文件找不到该函数。（这是因为 Coffeescript 将他们所有的代码都包装在了一个匿名函数中吗？）目前，我在两个文件上都有重复的代码，但它又湿又臭，而且通常让人不愉快。

资产代码

setUpEvent = (start, end, $event) ->
    startIdx = getHeaderIndex start
    $event.addClass "cell-#{startIdx}"

    endIdx = getHeaderIndex end
    $event.width((endIdx - startIdx) * 94)

    draggableOptions =
        revert: 'invalid'
        helper: 'clone'  # needed to work with grid
        grid: [101, 101]
        start: (e, ui) ->
            # hide so only helper clone is visible
            $(this).css 'visibility', 'hidden'
            ui.helper.addClass 'dragging dragged-event'
        stop: (e, ui) ->
            $(this).css 'visibility', 'visible'
            ui.helper.removeClass 'dragging dragged-event'

    resizableOptions =
        containment: 'parent'
        grid: [100, 0]
        handles: 'e, w'
        minWidth: 94
        stop: (e, ui) ->
            eventId = ui.element.data 'id'
            startColumn = Math.floor(ui.position.left / 100)
            endColumn = Math.ceil((ui.position.left + ui.size.width) / 100)
            data =
                start: getColumnDate startColumn
                end: getColumnDate endColumn
            updateEvent ui.element.data('id'), data

    $event
        .draggable(draggableOptions)
        .resizable(resizableOptions)

如何在资产和视图之间共享代码？

【问题讨论】：

标签： javascript ruby-on-rails coffeescript asset-pipeline

【解决方案1】：

无论它是否在文件外可见，您的函数都会运行。只需让它访问它需要的任何 DOM 元素，并确保它包含在 $(document).ready) 回调中。

【讨论】：

会在文件外可见吗？我想在视图文件中使用它，但它似乎不起作用。
那是倒退。我要告诉你的是 JavaScript 将运行，并找到你的视图。确保您的视图输出 JavaScript 期望看到的内容。您不应该直接从您的视图中调用 JavaScript。
这是一个 javascript 视图 (.js.erb)。我正在使用 Ajax 动态创建一个事件，因此不会重新加载页面。

【解决方案2】：

要访问文件外部的 Coffeescript 函数，我必须通过在函数前面加上 @ 前缀（即 @setUpEvent）来使函数全局化。这仅在函数在顶层定义时有效，因为what @ really does is bind the variable to this。

【讨论】：