rail3.1 javascript coffecsript newbie question
im fairly new To Javascript and Rails 3.1. So i now have a Rails app up und runnig and doing what i wha开发者_StackOverflownt,BUT: I wanted to add some Eye Candy(like nice dropdown menus and so on)with Jquery/Coffescript
I jave the include tags, and the application.js contains my self written methods/functions. But i encounter some unwanted behaviors:
id added an alert() to pages.js.coffee, and i hoped i would only be executed when calling something from the pages_controller, But it gets called on every page. Why is that?
Secondly i added a small test function for coloring the <h1> tags like this:
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"
Now the <h1> get a red background on page load. But none of my click actions ever seem to work.
Did i miss something?
Here is the rendered 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>
any hints?
Question 1:
id added an alert() to pages.js.coffee, and i hoped i would only be executed when calling something from the pages_controller, But it gets called on every page. Why is that?
The way the asset pipeline works (by default), all of your JS is aggregated into a single minified file for production. In development mode, the original files are served instead, but they're still all on every page. You'll have to make page-specific code conditional on something, e.g. the existence of a particular element:
if $('#myPageElement').length > 0
...
Question 2:
Now the get a red background on page load. But none of my click actions ever seem to work.
Your <script> tags come before the <body>, so your script runs right away. When it does, there is no #ccolor element yet, or any button—no HTML body at all. You can get around this by passing the code as a function into the jQuery object—as you've done with the highlight_h1 call, but not with the rest of your code—to run only after the entire document is ready:
$ ->
highlight_h1 "red"
#add some click action for fun
$('#ccolor').click ->
highlight_h1 "blue"
$('button').click ->
highlight_h1 "yellow"
To paraphrase Homer Simpson: "To indentation! The cause of—and solution to—all of life's problems."
Plug: There's a chapter on jQuery in my book, CoffeeScript: Accelerated JavaScript Development. It's aimed at beginners and should help you better understand these sorts of issues.
加载中,请稍侯......
精彩评论