RailsでRiot.jsメモ #Rails

参考
+ http://www2.ver1000000.com/blog/posts/25

とりあえずSPAじゃない、部分的にRiot.js使うのできた。

下準備

source 'https://rails-assets.org' do
  gem 'rails-assets-riot'
end

application.js

//= require riot

$ npm install riot -g
$ mkdir app/riot app/assets/javascripts/riot
$ riot -w app/riot app/assets/javascripts/riot

riot -w でapp/riot配下のtagファイルの変更がある度にassets配下にコンパイルされたjsファイルが書き出す。

呼び出し方

xxx.html.erb

<h1>Dashboard#index</h1>
<p>Find me in app/views/dashboard/index.html.erb</p>
<%= link_to 'Items', items_path %>

<todo></todo>

<script>riot.mount('todo', { title: 'TODO Title' })</script>

todo.tag

<todo>
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  this.items = []

  add(e) {
    var input = e.target[0]
    this.items.push(input.value)
    input.value = ''
  }
</todo>

でとりあえず動かすところまでいけた。