出于学习目的，我正在尝试在 Rails 4 应用程序中实现一个很棒的主题。主题位于此处:http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/
我将 .css 和 .js 分发到各自的目录中。
vendor/assets/stylesheets/
vendor/assets/javascripts/
我在 Assets 管道中添加了新文件，以便应用程序加载它们
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 文件中 应用程序/ Assets /javascripts/controller.js 但也不起作用。
如果我点击我电脑中模板的html文件就可以了，但是如何在rails上实现它呢？
最佳答案
这是由于没有将 js 文件包含在 application.js 内的正确位置，我查看了 index.html 文件theme 并发现 js 文件应该在底部。
更多详情可以查看here
关于javascript - 如何在 ruby on Rails 中使用 javascript 初始化变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32124272/