Backbone.js JavaScript

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

投稿日:

前回

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

今度は、backbone-on-railsでやってみた.

サンプルアプリ

show.html.erbはredcarpetで見られるようにしておく

Gemfile

generate

application.js

backbone-on-railsが自動でいろいろ足してくれている

_form.html.erb

テキストエリアのフォームにプレビューをくっつける
リアルタイムプレビューにするために、つぎの方針でいく
* Modelにテキストエリア内のデータを保存する
* テキストエリアにイベントがあったらモデルの内容を書き換える
* モデルに変更があったらPreviewを書き換える

この場合、Railsがテキストエリアのidをpost_contentにしている

Model

View テキストエリア

View Preview

Controller

controllerの役割はルートファイルに
アプリ名がStickitSampleだけどstickitは使わなかった

アプリスタート

_form.html.erb内からアプリをスタート.
ゾンビ問題とかはどうなってるか未検証.

できた

screenshot

-Backbone.js, JavaScript
-, , ,

執筆者:

関連記事

no image

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

  github.com/guard/guard github.com/guard/guard-livereload 目次1 自動make2 ブラウザの自動更新 自動make guardの準 …

Backbone.Eventを使ったグローバル通知

  By: Carissa Rogers – CC BY 2.0 Backbone.js global notifications berzniz.com/post/193515

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

ゾンビView問題~Backbone-supportでSwapping RouterとCompositeViewを使う

By: Charlie – CC BY 2.0 目次1 ゾンビView問題2 使う準備は簡単3 Composite View4 Swapping Router5 いろいろ6 Backbon …

Electron+Backbone.jsでボードゲーム〜3目並べ

By: sopasnor – CC BY 2.0 目次1 ボイラープレート2 構想3 盤面の描画4 Marionette.ObjectとBackbone.Radio5 AI6 Done!7 …