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

執筆者:

関連記事

no image

Rails3で動画配信を試用~flowplayer

  最近はYoutubeなど動画配信サイトも充実してきていて知人向けのプライベートな配信も可能なようだ しかし、やっぱりYoutubeにアップするのは抵抗があったり、LAN内だけで配信したい …

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …

vimでcoffee scriptの開発環境を整える~vim-coffee-script

環境 CentOS5.8にnodebrewでnode.jsをインストールを参考にubuntu server 12.04にnode v0.6.20をインストールした 目次1 coffee scriptの …

no image

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

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

Yeomanで最新のJavaScript開発環境を最速で整える

環境 mac OSX Lion Yeomanは最新のJavaScript開発のための統合環境を提供してくれます yeoman.io/index.html 紹介動画 目次1 インストール2 さっそくアプ …