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

Rails3.2でユーザー管理機能を追加2~Devise+AjaxDataTables

  前回 Rails3.2でユーザー管理機能を追加~Devise 参照 Railsでajaxなテーブルを使う~datatables   いままでAjaxでのデータ更新ができなかった …

Backbone-formsをさわってみた

github.com/powmedia/backbone-forms backbone-formsの特徴 簡単なスキーマでフォームを生成 バリデーション ネストしたフォーム 使えるそしてカスタマイズ可 …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

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

  By: Bering Land Bridge National Preserve 前回 Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる Ra …

no image

Railsで動画ファイルを管理する~CarrierWave Flowplayer

  参考 Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick Rails3で動画配信を試用~flowplayer 環境 Ubuntu …