如何在Rails的ruby中使用javascript初始化变量？

Question

I am trying to implement a great theme to a rails 4 app for learning purposes. The theme located here: http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/

I distributed the .css and .js in their respective directories.

vendor/assets/stylesheets/

vendor/assets/javascripts/

I added the new files in the assets pipeline for the app to load them

CSS

app/assets/stylesheets/application.css

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

Javascript files are loading, I can see it on the header of the page source.

Here is the javascript file:

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 };
})();

There is a script in the html file I need to run but I have not been able to implement it to rails 4.2.

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

            Menu.init();

        });
    </script>

I ve tried to leave the script in the .html.erb file but it does not work, I also tried to add the script to a javascript file in app/assets/javascripts/controller.js but is does not work either.

This works if I click on the html file of the template in my computer, but how can I implement it on rails?

Answer 1

It is due to not inclusion of js file in proper place inside application.js , i reviewed the index.html file of the theme and found js file should be in bottom. You can find the more details here

Answer 2

For this you could use this in your view file

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

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

});
</script>

If the document is loaded the Menu function will be executed.

Its is possible that the $.getScript() can't find the function, there for you will need to put the js file in the views map of the specific controller.

Don't forget to add a route in the config/routes.rb

And change var Menu = (function() { into menu = function() { and place var menu; in the top of the js file.