如何在 ruby on rails 中使用 javascript 初始化变量？答案

【问题标题】：How to initialize a variable with javascript in ruby on rails?如何在 ruby on rails 中使用 javascript 初始化变量？
【发布时间】：2015-08-20 17:09:10
【问题描述】：

我正在尝试为 rails 4 应用程序实现一个很棒的主题以用于学习目的。主题位于：http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/

我将 .css 和 .js 分发到各自的目录中。

vendor/assets/stylesheets/

vendor/assets/javascripts/

我在资产管道中添加了新文件，以便应用加载它们

CSS

app/assets/stylesheets/application.css

*= require style
*= require normalize
*= require demo
*= require_tree .
*= require_self

Javascript 文件正在加载，我可以在页面源的标题上看到它。

这里是 javascript 文件：

var Menu = (function() {

var $container = $( '#rm-container' ),                      
    $cover = $container.find( 'div.rm-cover' ),
    $middle = $container.find( 'div.rm-middle' ),
    $right = $container.find( 'div.rm-right' ),
    $open = $cover.find('a.rm-button-open'),
    $close = $right.find('span.rm-close'),
    $details = $container.find( 'a.rm-viewdetails' ),

    init = function() {

        initEvents();

    },
    initEvents = function() {

        $open.on( 'click', function( event ) {

            openMenu();
            return false;

        } );

        $close.on( 'click', function( event ) {

            closeMenu();
            return false;

        } );

        $details.on( 'click', function( event ) {

            $container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
            viewDetails( $( this ) );
            return false;

        } );

    },
    openMenu = function() {

        $container.addClass( 'rm-open' );

    },
    closeMenu = function() {

        $container.removeClass( 'rm-open rm-nodelay rm-in' );

    },
    viewDetails = function( recipe ) {

        var title = recipe.text(),
            img = recipe.data( 'thumb' ),
            description = recipe.parent().next().text(),
            url = recipe.attr( 'href' );

        var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );

        $modal.appendTo( $container );

        var h = $modal.outerHeight( true );
        $modal.css( 'margin-top', -h / 2 );

        setTimeout( function() {

            $container.addClass( 'rm-in rm-nodelay' );

            $modal.find( 'span.rm-close-modal' ).on( 'click', function() {

                $container.removeClass( 'rm-in' );

            } );

        }, 0 );

    };

return { init : init };
})();

我需要运行的 html 文件中有一个脚本，但我无法将它实现到 rails 4.2。

    <script type="text/javascript">
        $(function() {

            Menu.init();

        });
    </script>

我尝试将脚本保留在 .html.erb 文件中，但它不起作用，我还尝试将脚本添加到 javascript 文件中应用程序/资产/javascripts/controller.js 但它也不起作用。

如果我在我的计算机中单击模板的 html 文件，这可以工作，但是如何在 rails 上实现它？

【问题讨论】：

@the_call_me_joe 请检查您的 application.js 文件，我认为您的 js 不包含在其中。
@Arv 对不起，我忘了把它包括在问题中。所有 .js 文件都已添加到 application.js。谢谢。
@the_call_me_joe 我刚刚集成了主题，我发现我们必须在底部添加js，而不是像我们默认的那样在顶部添加。你可以在这里找到代码github.com/arvindvyas/3dtheme
@Avr 非常感谢！！你不知道我努力让这个工作多久了！你让我今天一整天都感觉很好！我真的不知道我的源代码发生了什么。
@Arv 你是如何设法阻止控制器视图并让布局来渲染东西的？

标签： javascript html ruby-on-rails ruby-on-rails-4

【解决方案1】：

这是由于 js 文件没有包含在 application.js 中的适当位置，我查看了 theme 的 index.html 文件，发现 js 文件应该在底部。您可以找到更多详情here

【讨论】：

【解决方案2】：

为此，您可以在视图文件中使用它

<script>
$.getScript('/path to file', function(){

    $(document).ready(menu);
    $(document).on('page:load', menu);

});
</script>

如果文档被加载，菜单功能将被执行。

$.getScript() 可能找不到该函数，因为您需要将 js 文件放在特定控制器的视图映射中。

别忘了在config/routes.rb中添加路由

并将var Menu = (function() {改成menu = function() {，并将var menu;放在js文件的顶部。

【讨论】：