JSのMVCフレームワークbackbone.jsやってみた
Posted: 2013.08.21 / Category: javascript 最近 JavaScript のMVCフレームワークが増えてきていますが、WordPress にも採用されてちょっと気になっていた backbone.js を使ってみました。 ダウンロード Backbone.js を下記URLからダウンロードします。 また Backbone.js は Underscore.js, jQuery に依存しますので合わせてダウンロードしましょう。 Backbone.js Underscore.js Backbone.js 1.0.0 Underscore.js 1.5.1 jQuery 1.8.2 を使用します。 ダウンロードしたら読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2
Backbone.js Collection.fetch() による一覧画面の描画 | 開発メモるアル
以前書いた、Backbone.js Model.save()によるPOSTデータをPHPで読み込むに続いて、 Backbone.jsを使ったリソース参照に関する記事です。 Backbone.jsを使った一覧表示サンプル Backbone.jsのCollectionとModelを使って、Collection.fetchの結果を画面に一覧表示するサンプルを作ってみました。 一覧表示サンプル サンプルの動作 「表示」ボタンをクリックすると、ユーザーリソースにGETリクエストを送信 JSON形式のユーザー一覧データを含むレスポンスが返ってくる backbone_fetch_test.jsがレスポンスを解析して画面に表示する サンプルを構成するファイル サンプルを動作させているファイルの一覧と、ファイルの内容です。ブログ用にコメント多めに入れてます。 ファイル一覧 backbone-fetch-te
MVCパターンでアプリケーションを構築する（Backbone.js）
本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用［厳選111］』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『JavaScriptライブラリ実践活用［厳選111］』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。 Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。 名称： Backbone.js 分類： フレームワーク URL： http://backbonejs.org/ 関連ファイル： backbone-0.9.9.js
04 | 8月 | 2013 | nacika.com
夜です。今回は何を思ったのか、backbone.jsの公式ページを眺めるという行為に及んでみたいと思います。 ちょっと見てみると、backbone.jsのルーティングがなんか便利そうじゃないですか。pushState触らなくていいとか！ ajax使うにはもうbackboneは手放せない存在なんじゃないでしょうか。githubは違うプラグイン使っているみたいですが… 公式ページ。backbone.jsの配布ページとマニュアルページがひとつに繋がっているタイプ。Ctrl+Fで検索しやすいのでなかなかいいかも。 IntroductionGoogle翻訳を使ってIntroductionを読んでみます。要約すると(確実に翻訳ミスがあります) jQueryをDOMを直接操作してHTMLを動的に動かす開発をしてるんでしょうけど、古いよフロントエンドとサーバー間でデータの受け渡しに四苦八苦してるBackb
Backbone.js Todosを読み解く - console.lealog();
というわけで色々Backbone.jsについて見てはいるものの、いざ自分で作ってみると上手くいかない・・。 ようはどの単位でViewとModelを紐付ければ良いかわからないんですよねー。 というわけで、Todoリストのサンプルからそのヒントを得ようという試み。 参考：Backbone.js Todos Backbone.js Todosについて 見ての通りBackbone.jsで作られたサンプルアプリ。 Todoリストのデータの保管にはLocalStorageを使ってて、別のライブラリを読み込んでます。 ソース全部 せっかくなので、ソースについてるコメントを和訳しときます。 // An example Backbone application contributed by // [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a
(1/2) - 第一回 jQueryから始めるBackbone.js - 実践！Backbone - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる！」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの？ すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
Marionette.js(Backbone.js)のチュートリアル with yeoman その１(準備からサーバー側実装まで) - lxyuma BLOG
Marionette.jsのチュートリアルを書く。 特に、yeoman製のgenerator-marionetteを使って、 railsみたいに、楽しながら、進めていく。 量が多くなったので、何度かに分けて書く。 この記事は、yeomanによる準備から、node+expressによるサーバー側まで。(baucis という楽チンな仕組みを使う) Marionette.jsとは？ この前作ったslideをご参考に。 introduction to Marionette.js (jscafe14) from Ryuma Tsukano インストール 以下のgenerator-marionetteのgithubのページを参照 https://github.com/mrichard/generator-marionette#install 特にハマる事は無い。多分ね。 project作成 proje
試して学ぶ Backbone.js入門 | Remote TestKit
Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsの概要から、インストール方法、Modelの基本を説明していきます。 はじめに Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsはその名が示す通り、Webアプリケーションにアーキテクチャという背骨を提供することを目的としたライブラリです。直ぐに複雑なスパゲッティコードになりがちなWebアプリケーションに、Backbone.jsが提供するEvent, Model, Collection, View, Routerというコンポーネントを使うことで、Webアプリケーションに一定の構造を与えることが可能になります。 例：Backbone.jsによるアーキテクチャイメージ Backbone.jsによるWebアプリケーションの一例 様々なJavaScri
Backbone.js + Marionette.js / AngularJS編in「Rails勉強会@東京第88回」
普段仕事をしていると、自分のやっている案件や会社内でのプロジェクトのことはわかりますが、「Railsの他社での設計方法」みたいなことを知る機会って中々ないですよね。そんな時にオススメしたいのがRails勉強会@東京です。月1回(?)の開催で前回が88回目だったので、Rails 1.xxのころから、7年近く継続している勉強会だそうです。 この勉強会のスタイルは、参加者の興味があるテーマを集めて人気のあるテーマにしたがってフリーディスカッションやハンズオンを行うというものです。参加者が主体的に発言できたり、実際の現場でどんなカタチで開発しているかがラフに聞けてしまいます＾＾ 今回は10/19(土)の勉強会の中で、僕が参加したJavaScript Frameworkの議論を参考にさせていただきつつ、周辺の資料をまとめてみました！ (2013/11/13) アシアルさんのブログのAngularJS
Backbone.js入門 「Events」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。この記事でいえば、bindは無くなり、現在ではonやlistenToが使われています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） ネタ切れ感が否めないBackbone.js Advent Calendarですが、今回から何回かに分けて懇切丁寧な入門記事を書いていこうと思います。 以下のように書き進めていく予定です。 Events View Model ViewとModelの連携 Collection ViewとModelとCollectionの連携 RouterとHistory なおここで扱うBackbone.jsのバージョンは0.5.3です。 Backbone.jsのドキュメントを開くとまず最初に解説されているの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実践Backbone.Marionette 現場の悩みと解決まで