coffeescriptも勉強中だしjqueryも勉強中だし

ってことでjqueryの本に載ってることをcoffeescriptで書き直してます。で、実際に動かしてみるときはRailsで環境を作ってます。coffeescriptからjavascriptへの変換はRailsに任せましょう。

generateまで

rails new cs
cd cs
rails generate controller Cafe index

rails serverで起動してhttp://localhost:3000/cafe/index

http://ascii.jp/elem/000/000/498/498710/index-6.htmlにあるサンプル例なら app/views/index.html.erb にHTMLを追加。

<dl>
	<dt>テキスト1</dt>
	<dd>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</dd>
	<dt>テキスト2</dt>
	<dd>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</dd>
	<dt>テキスト3</dt>
	<dd>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</dd>
</dl>

app/assets/javascripts/cafe.js.coffee にcoffeescriptを追加。

$ ->
	$("dd:not(:first)").css("display","none")
	$("dl dt").click ->
		if $("+dd",@).css("display") is "none"
			$("dd").slideUp("slow")
			$("+dd",@).slideDown("slow")

これが http://localhost:3000/assets/cafe.js を見ると変換されている。

(function() {

  $(function() {
    $("dd:not(:first)").css("display", "none");
    return $("dl dt").click(function() {
      if ($("+dd", this).css("display") === "none") {
        $("dd").slideUp("slow");
        return $("+dd", this).slideDown("slow");
      }
    });
  });

}).call(this);

ついでにsassは assets/stylesheets/cafe.css.scss に。

*{
	margin:0;
	padding:0;
}
dl{
	width:400px;
	margin:50px auto;
	dt{
		background:#7CADB6;
		border-bottom:1px solid #FFFFFF;
		cursor:pointer;
	}
	dd{
		border:1px solid #7CADB6;
		border-top:none;
		height:300px;
	}	
}