Question

我是相当新的Javascript和Rails 3.1。所以我现在有一个Rails app up und runnig并做我想做的事，但是：我想用Jquery / Coffescript添加一些Eye Candy（比如漂亮的下拉菜单等）

我jave包含标签，application.js包含我自己编写的方法/函数。但我遇到一些不需要的行为： id为pages.js.coffee添加了一个alert（），我希望我只能在从pages_controller调用某些内容时执行，但它会在每个页面上调用。这是为什么？其次，我添加了一个小测试函数，用于着色<h1>标签，如下所示：

app/assets/javascript/pages.coffee.js:

highlight_h1 = (color) ->
    $('h1').css('background',color)
#change colour on page load
$ -> highlight_h1 "red"
#add some click action for fun
$('#ccolor').click ->
    highlight_h1 "blue"

$('button').click ->
    highlight_h1 "yellow"

现在<h1>在页面加载时获得红色背景。但是我的点击动作似乎都没有奏效。我错过了什么？这是渲染的html：

<h1 id="ccolor" style="background-image: initial; background-attachment: initial;  background-origin: initial; background-clip: initial; background-color: red; background-position: initial initial; background-repeat: initial initial; ">Home</h1>
<p>Here Should be a Login Page an Stuff</p>
<button>make me yellow</button>
<a href="/users/sign_up" class="signup_button_round">Sign up now!</a>

任何提示？

Answer 1

问题1：

id向pages.js.coffee添加了一个alert（），我希望我只能在从pages_controller调用某些东西时执行，但它会在每个页面上调用。这是为什么？

资产管道的工作方式（默认情况下），所有JS都汇总到一个缩小的文件中进行生产。在开发模式中，原始文件是相反的，但它们仍然存在于每个页面上。您必须根据某些内容制作特定于页面的代码，例如：特定元素的存在：

if $('#myPageElement').length > 0
  ...

问题2：

现在页面加载时获得红色背景。但是我的点击动作似乎都没有效果。

您的<script>代码位于<body>之前，因此您的脚本会立即运行。如果是，则还没有#ccolor元素，或者任何button - 根本没有HTML正文。您可以通过将代码作为函数传递到jQuery对象来解决这个问题 - 就像您使用highlight_h1调用一样，而不是代码的其余部分 - 只有在整个文档准备就绪后才能运行：

$ -> 
  highlight_h1 "red"

  #add some click action for fun
  $('#ccolor').click ->
      highlight_h1 "blue"

  $('button').click ->
      highlight_h1 "yellow"

用荷马辛普森的话说：“要缩进！解决生活中所有问题的原因。”

插件：我的书中有一章关于jQuery，CoffeeScript: Accelerated JavaScript Development。它针对初学者，应该帮助您更好地理解这些问题。

rail3.1 javascript coffecsript新手问题

1 个答案: