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

Share code between asset and view

本文关键字：之间 共享 代码 视图      更新时间：2023-09-26

我有一组大约40行代码，我需要在两个。js。咖啡资产文件和.js。视图中的Erb文件。它有一个对象的设置代码，当我在页面上加载现有对象(资产文件中的代码)和当我动态创建一个新对象(视图中的代码)时使用。

似乎我不能在资产文件中使用部分，因为它们是静态的。我试图在资产中为代码创建一个函数，并在视图中调用它，但视图文件找不到该函数。(这是因为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)

如何在资源和视图之间共享代码?

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

要访问文件外部的Coffeescript函数，我必须通过使用@前缀来使函数全局(即@setUpEvent)。这只适用于在顶层定义函数时，因为@真正做的是将变量绑定到this。

相关文章：