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
-, ,

執筆者:

関連記事

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

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

no image

Private_pubでのJSON通信の方法

  前回 Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)   Gemfileへの追加とbundleの実行 privat …

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …

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

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

no image

Google SpreadsheetにGoogleカレンダーからイベントの一覧を読み込む〜Google Apps Script

リファレンス developers.google.com/apps-script/ カレンダーのリファレンス developers.google.com/apps-script/reference/c