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

執筆者:

関連記事

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

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

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …

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

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

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

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

Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる

  By: Glory Cycles   Developing Backbone.js Applications addyosmani.github.com/backbone-fu