JavaScript

Rails4でMarkdownをリアルタイムプレビュー〜vue.js&marked.js

投稿日:

vue.jsとは

vue.jsはインタラクティブなウェブインターフェイスのための軽量なJavascriptのフレームワーク.
angularぽいけど、より簡単/軽量という評判.

公式
vuejs.org/

このサンプルを参考にRails4のtextareaフィールドでmarkdownをリアルタイムプレビューできるようにしてみた
vuejs.org/examples/index.html

Hello vue.js

まずはGetting Startedを参考にTodoアプリをつくってみる

Gemfile

bundle

application.js

main#index

routes.rb

index.html.erb

index.js.coffee

できた

おおざっぱにいうと、
– 基本は、 new View({el: '#demo'}) の部分で、親になるhtml要素にオブジェクトを結びつける
– data要素以下で、データの設定ができる
– method要素以下で、動作の設定ができる、その他、自前のフィルターなども設定できる
– ディレクティブという独自のhtml用をViewに書き込む
– v-modelはデータと同期する
– v-repeatは複数のデータの数だけ繰り返す
– v-onはイベントが起きた時に対応する処理をする
– ほかにmustacheテンプレートを使うこともできる
– somethng | filterでフィルターをかますこともできる

screenshot

サンプル準備〜Redcarpet導入など

サンプルscaffold

rake db:migrate

Gemfile

redcarpetはサーバーサイドでmarkdownをレンダリングするgem

#272 Markdown with Redcarpet

Markdown記法チートシート(redcarpet)

application_helper.rb

Rails Markdown サンプルアプリを参考に.

show.html.erb

確認

screenshot

vue.jsでリアルタイムプレビュー

textareaのフォームの隣にプレビュー画面をつける

Gemfile

application.js

posts_helper.rb

サンプルをみると、text_areaにv-modelプロパティ、プレビュー部にv-htmlプロパティをつける必要がある.
やっつけでhelperをつくってみる.
gsubで無理やりに入れ込んでる

_form.html.erb

posts.js.coffee

posts.css.scss

できた

意外に簡単に設定できた
screenshot

ただし、vue.jsは値を永続化するにはあまり向かなさそう
値を永続化するときは、backbone-on-railsやanguler-resourcesを使ったほうが簡単そう.

-JavaScript
-, ,

執筆者:

関連記事

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …

文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit

By: the Italian voice 目次1 Best in place2 Mercury editor3 create.js4 スクラッチで5 X-editable Best in place …

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f