Блог

Главная - Вопросы по программированию - Совместное использование кода между ресурсом и представлением

Совместное использование кода между ресурсом и представлением

#javascript #ruby-on-rails #coffeescript #asset-pipeline

#javascript #ruby-on-rails #coffeescript #ресурс-конвейер

Вопрос:

У меня есть набор из примерно 40 строк кода, которые мне нужно использовать как в файле активов .js.coffee, так и в файле .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)

Как я могу поделиться кодом между ресурсом и представлением?

Ответ №1:

Ваша функция будет выполняться независимо от того, видна ли она вне файла. Просто предоставьте ему доступ к любым элементам DOM, которые ему нужны, и убедитесь, что он включен в $(document).ready) обратный вызов.

Комментарии:

1. Будет ли он виден вне файла? Я хочу использовать его в файле представления, но, похоже, он не работает.

2. Это наоборот. Я говорю вам, что JavaScript будет запущен и найдет ваше представление. Убедитесь, что ваше представление выводит то, что ожидает увидеть JavaScript. Вы не должны напрямую вызывать JavaScript из своих представлений.

3. Это представление javascript (.js.erb). Я динамически создаю событие с помощью Ajax, поэтому перезагрузки страницы не происходит.

Ответ №2:

Чтобы получить доступ к функции Coffeescript вне файла, мне пришлось сделать функцию глобальной, добавив к ней префикс @ (т.Е. @setUpEvent ) . Это работает только тогда, когда функция определена на верхнем уровне, потому что на самом деле @ привязывает переменную к this .