Backbone.js ではじめるクライアントサイド MVC プログラミング | CYOKODOG
MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の３つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto）に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs
Backbone.jsでViewからModel・DOMを操作する時の流れ - maeharinの日記
自分の頭の中の整理のために。 はじめに Backbone.jsガイドブックを読んでいたら、このような事が書いてあった。 Backbone流MVCでは、ビューとコントローラは両方ともViewが担当します。（略）これらはそれぞれViewのメソッドとして実装しますが、本書では区別のために前者をビューメソッド、後者をコントローラメソッドと呼ぶことにします。（略）重要な点は、DOMイベントに応じてコントローラメソッドが実行されることで処理が始まり、その中でmodelやcollectionを操作し、その結果生じるイベントがビューメソッドを呼ぶ、という流れを意識することです。そのためにも、コントローラメソッドには処理の起点になる以上の仕事を与えず、DOM操作はすべてビューメソッドに集めるよう明確に区別しましょう。 図にするとこんな感じになる（点線がイベントで実線が直操作） しかし、なぜこのような書き方に
やはりおまえらの MVC は間違えている in バックボーンジェーエス - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
続編の紹介 続編 やはり俺のMVCは間違えている in Backbone.js を書いた。そっちのほうが有益な情報が乗ってると思うけど面白くないかもしれない 以下本編 MVC の話と宗教の話と政治の話と野球の話はしてはいけないそうですがそんなの知るか俺はするぞ クライアントサイド MVC の話 そもそも MVC の出自が GUI アプリケーションのために生まれてきたものなので「クライアントサイド MVC」などと言う言い方をしなければならない状況がすでに憎いのだけれど、まあそれはおいておく。 「うちは Backbone.js を使っているから MVC でクライアントサイドが作られていて保守性が高いです」みたいなことを言う人間がたまにいるが、Backbone.js をつかったから（あるいは Marionette.js を使ったらから）といって自動的にお前のアプリケーションが MVC になるわけ
backbone奮闘記2, メモリリークをやっつけろ
こんにちは。 今回はbackbone.jsが引き起こすメモリリークについて語ります。 普通によくやるので、結構有名な話。 「backbone ゾンビ」でググるとたくさんヒットするんだけど、脳に定着させるためにまとめてみる。 ではまず問題のコード。 どこが悪いでしょうか？ リークを引き起こすコード例 var ListView = Backbone.View.extend({ initialize: function() { this.collection.on('reset', this.reset, this); }, reset: function(collection, options) { this.$el.html(''); collection.each(function(model) { this.append(model); }, this); return this;
Backbone.jsでつくるMVPなUIパターン【リスト】 | DevelopersIO
今回はBackbone.jsを使ってフォームから追加し、削除できるリストを作ってみたいと思います。デザインは前回同様Twitter Bootstrapで作成しました。 htmlはこちら！ <div id="ui-list"> <div class="list-controls"> <form> <div class="input-append"> <input type="text" placeholder="Please type something" /> <input type="submit" class="btn" value="Add" /> </div> </form> </div> <div class="list-items"> <ul> <li class="list-item" data-cid="c1"> <a href="#" class="close">×</a
JavaScript : Backbone.js #5 - Modelのサーバ連携 : typeOf 'aki_mana'
Mackbone.Modelの派生クラスは、デフォルトでAjaxによるサーバとの連携ができる。 前のエントリでも書いたのだけど、fetch(), save(), destory() の3つのメソッドを使う。 この３つのメソッドから、Backbone.sync()が呼ばれ、$.ajax()用にオプション処理するが、この中ではサーバー側アプリケーションの要件に応じて、Backbone.emulateHTTP、Backbone.emulateJSON というフラグを活用し、古い実装でのアプリケーションにも対応しやすくする様子。 Modelに実装される、サーバー連携用メソッドは３つ。 model.fetch() サーバーから読む。model.save() サーバーに書き込む。model.destroy() サーバーから削除する。 この３つは、Modelの派生クラスにsync() を実装した場合はそ
Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD～fullcalendar-rails | Scimpr Blog
前回Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails FullCalendarのagendaViewでselectの場所がずれる問題 参考 Building a shared calendar with Backbone.js and FullCalendar: A step-by-step tutorial 参考リンクをみながらCRUDのうちREAD、CREATE、UPDATEの一部だけやってみた READ ～データベースからイベントを読み込んでカレンダーに表示するviewの準備～backbone.jsからfullcalendarを表示するGemfile group :assets do gem 'fullcalendar-rails', git: 'git://github.com/seventhsense/fullcale
Backboneの小ネタなパターン3つ (Backbone Advent Calendar 2012 21th day)
Backbone.js Advent Calendar 2012の21日目でございます。おもむろに小ネタなパターンを、3つほど簡単に紹介してみる次第。 renderとpresenterの分離パターン これは Backbone.js Tips and Tricks を参考にしています。実践してみたところ、なにかと具合が良くてお気に入りのパターンです。 Backbone.View.extend({ tmpl: 'path/to/tmpl', initialize: function() { this.model = new SomeModel(); this.model.fetch({ success: this.render }); }, presenter: function() { var data = this.model.toJSON(); // data manipulation
【前編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
前回の更新からだいぶ間が開いてしまいましたがこのシリーズはまだ終わりません！今回はTwitter BootstrapにjQuery Pluginとして実装されているScrollSpyを真似して作ってみたいと思います。 ちょっと解説が長くなってしまったので前後編に分けてご紹介します。 後半はこちら >> Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】後編 デザイン 4つの文章に対しそれぞれナビゲーションが存在し、文章のエリアをスクロールして閲覧している文章に対応するナビゲーションがアクティブ表示になるというものです。 このUIのhtmlは以下のようにコーディングしました <div id="ui-scroll-spy"> <div class="scroll-spy-nav navbar"> <div class="navbar-inner"> <div class="
Backbone.js 入門してハマったポイントと対策
Backbone.js とは JavaScriptフレームワークです。 http://backbonejs.org/ Backboneをはじめて利用するにあたってハマったポイントと対策に JSフレームワークについての感想を簡単に書いてみました。 ハマってみるのも醍醐味かもしれませんが、時間の無駄とも言わざる得ないので 同じように困った方のためになればいいなぁ、と自戒を込めて記録しようと思います。 ちなみにエラーメッセージはちゃんと出るんですが、どこで起きてるエラーなのか 突き止めるのに時間が掛かったりします。 エラーメッセージに慣れてくると「あ、これ見たことあるエラーだ」とハマる時間も減ります。 ◯エラーメッセージと対策 ※開発中はChromeでも確認していたので、Chromeのエラーメッセージとなります。 ※凡ミスだらけですが、ご了承ください。 ・Uncaught TypeError:
Backbone.jsガイドブック - naoyaのはてなダイアリー
Backbone.jsガイドブックposted with amazlet at 13.05.07高橋 侑久 ラトルズ 売り上げランキング: 2,459 Amazon.co.jpで詳細を見る Backbone.js ガイドブックを一通り読みました。言及するか少し迷ったけど、まだあまり話題になっていないようなので書いておこうと思います。 Backbone.js あるいはこれによく似たようなフレームワークは今後、Webアプリケーション開発でよく使う道具になっていくと思う。というか、すでになっているでしょう。 Backbone.js は「クライアントサイドMVCフレームワーク」と呼ぶと良くわからない。クライアントサイドMVCフレームワークが注目される以前から、ある程度以上の規模の JavaScript アプリケーションになるとちゃんとしてるものは構造化が行われていた。イベントを集約するオブジェクト
Backbone.jsにおけるModel-View-Presenterアーキテクチャパターン | DevelopersIO
クライアントサイドJavaScriptのフレームワークとして人気のBackbone.jsが採用している Model–View–Presenter (MVP) というアーキテクチャパターン(以下MPVパターン)について考察してみます。 Model-View-Controllerなら聞いたことあるけど？ 僕もそうでした。初めて知ったのはRuby on Railsを触った時です。 Modelはデータと手続きを担当し、ViewはUIを、Controllerは入力イベントを受付けてModelとView操作する…とまぁざっくり言うとこんな感じですよね。 MVPパターンも凄く似ていて、どうもMVCパターンから派生したものみたいです。以下が各パターンの図です。 Model-View-Controller Model-View-Presenter PresenterがModelとViewを操作しているところ
Backbone.js と比較しながら Knockout.js を試してみた - present
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディング機能に興味を持っていたところに、テンプレート機能が追加されて、試してみたくなりました。 念のため説明すると、Knockout.js は、.NET 開発者にはお馴染みの、データバインディングや MVVM パターンが特徴のフレームワークです。 Knockout : Home ちなみに、Backbone.js の記事はこちら。 作って覚える Backbone.js - present 作って覚える Backbone.js (2) Router 編 - present T
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rendr入門: サーバサイドで(も)動かす、Backbone.js
jQuery: FadeIn/To and SlideDown new element