CarrierWave & rmagick

https://github.com/carrierwaveuploader/carrierwave

CarrierWave provides a generator called uploader to do this to which we pass the name we want to give our uploader, in this case image.

$ rails generate uploader Avatar

加欄位

$ rails g migration add_avatar_to_users avatar:string

Open your model file and mount the uploader

class User < ActiveRecord::Base
  mount_uploader :avatar, AvatarUploader
end

resize

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  process :resize_to_fit => [800, 800]

  version :thumb do
    process :resize_to_fill => [200,200]
  end
end

Mustache Template with Nested Array of Objects

情境：使用者點選按贊的人數時 顯示出按贊的人是誰

view: ajax 送js

contoller處理

def likedPeople
  @post = Post.find(params[:post_id] 
    respond_to do |format|
    format.js
  end
end

之後到likedPeople.js.erb

  2 var template = $('#template').html();
  3 Mustache.parse(template);   // optional, speeds up future uses
  4
  5 var arr = <%= safe(@post.liked_people.to_json) %> ;
  6
  7 var rendered = Mustache.render(template, {rows: arr})
  8
  9 $('#target').html(rendered);

先將@post.liked_people.to_js 再送到Mustache裡面去
但由於其內容是Nested Array of Objects
所以再加個

  7 var rendered = Mustache.render(template, {rows: arr})

來處理

template 就處理每個row

  3 <script id="template" type="x-tmpl-mustache">
  4   <ul class="list-like-group">
  5     {{#rows}}
  6     <li class="list-like-group-item" >
  7       <img class="like-author-photo" src="{{image.url}}" />
  8       <a href="/users/{{id}}/posts">
  9         {{name}}
 10       </a>
 11     </li>
 12     {{/rows}}
 13   </ul>
 14 </script>

css 相框 + hover 顯示文字

css

.imgWrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin: 10px;

  .bg1 {
    position: absolute;
    right: -3px;
    bottom: -3px;
    background-color: #E3E3E3;
    width: 100%;
    height: 100%;
    z-index: 91;
  }

  .bg2 {
    position: absolute;
    left: -3px;
    top: -3px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #E3E3E3;
    z-index: 92;
  }

  .imgDiv {
    width: 95%;
    height: 95%;
    position: relative;
    z-index: 98;
  }
}

div.post-photo {
  background-size: 100% 100%;
  height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: 3px solid #fff;

  .post-content{
      width: 100%;
      height: 200px;
      opacity:0;
      background: #FFF;
  }

  &:hover .post-content{
           opacity:0.5;
           text-align:justify;
           color:#000000;
           font-size:20px;
           font-weight:700;
           font-family:"Times New Roman", Times, serif;
  }
}

html

<div class="postPhoto">
  <div class="imgWrap">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="imgDiv">
      <div>
        <a href="http://localhost:3000/posts/29">
          <div class="post-photo" style="background-image: url(/uploads/post/image/29/london_2423609b.jpg)">
            <div class="post-content">
 要感受英國的魅力，必要到首都倫敦看一下了。倫敦是一個多元化的文化搖籃，約有 700 萬人口，來自 40 個不同的民族。泰晤士河將倫敦大致分為北區和南區，小倫敦（The C..
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

jquery on

jquery binding的問題
當有些html是隨著操作動態產生的時候

如果直接用
('.class').click的話 後續產生的會沒有作用
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
要用

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

turbolinks

來源 http://chloerei.com/2013/07/14/turbolinks-guide/

來源：Rails 4のturbolinksについて最低でも知っておきたい事

用了後
jQuery.ready()會失效

但可以再裝jquery.turbolinks插件
https://github.com/kossnocorp/jquery.turbolinks

Turbolinks 訪問新頁面會觸發5個事件：

page:before-change開始換頁，返回false終止訪問
page:fetch開始訪問新頁面
page:receive已經收到服務器返回，但還沒處理
page:change已切換到新頁面
page:load整個處理完成
而使用瀏覽器歷史返回上一頁的時候，會觸發2個事件：

page:change已切換到緩存頁面
page:restore訪問歷史記錄完畢