Backbone.js入門 | Webエンジニアブログ
Modelの動作確認からはじめるBackbone.js HTML Backbone.jsの入門記事です。Modelを定義してBackbone.jsのメソッドを実際に使用してみます。 アプリケーションのHTMLを作成します。 <!DOCTYPE html> <html> <head> <title>Backbone.jsの動作確認</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" type="text/css"> </head> <body> <h1>Engineers List</h1> <ul></ul> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></s
I am mitsuruog | Backbone.jsともっと仲良くなるためのヒント
先日めでたく 1.0.0 をリリースした Backbone.js ですが、よくも悪くも「どう作るか」について、作成者側の思いで自由にできるため、始めの取っ掛かりとして、どう作ればよいかと言うことで結構悩む方も多いかと思います。 そこで、同じように悩んでいる人になんらかのヒントを与えられればと思い、シングルページアプリケーションを題材にチュートリアルを作成して公開してみました。 また、私が Backbone.js でアプリケーションを作成する上で、特に View について注意するポイントを幾つか紹介します。 何かの参考になれば幸いです。 このエントリでお伝えしたいこと。 Backbone.js のチュートリアル作りました。 Backbone.View を扱う際に注意するポイントについていくつか紹介します。 チュートリアル 早速ですが、Backbone.js でシングルページアプリケーションを
APIDOCS | Backbone.js (1.1.0) 日本語リファレンス
サイトトップへ Backbone.js (1.1.0) >> Githubリポジトリ >> 説明付きソース はじめに アップデート Events fon foff ftrigger fonce flistenTo fstopListening flistenToOnce f組み込みイベントのカタログ Model fextend fconstructor / initialize fget fset fescape fhas funset fclear pid pidAttribute pcid pattributes pchanged fpdefaults ftoJSON fsync ffetch fsave fdestroy fUnderscore.jsのメソッド(6) fvalidate pvalidateError pisValid furl fpurlRoot fparse fcl
Backbone.js入門: 初学者の為のロードマップ | mawatari.jp
最近、JavaScriptを多用するWebアプリケーションの開発に携わる機会が増えてきました。 jQueryのイベントハンドラをベタに書いていくのは、規模が小さいうちは良いのですが、機能追加・仕様変更等が多発すると少々面倒なことになります。このまま大きくなっていくと破綻が目に見えているので、構造化されたアプリケーションを作りたいと思いBackbone.jsを学び始めました。 Backbone.js 公式サイト 7月上旬から学び始めたので、まだ20日程度ですが、その中で学んだこと等を紹介します。これから勉強を始めてみようと思う人の参考になれば、幸いです。 以下の内容は、Backbone.jsの熟練者が指南しているわけではないことを予めご了承ください。ちなみに、平日の夜と、時間が取れるときの週末を使って勉強して、イベントサービスのWebAPIを串刺し検索するアプリ等を作るくらいには、Backb
Backbone.jsと比較したReact.js - Qiita
はじめに 普段はBackbone.jsでアプリを作成しているのですが、React.jsの評判が高まってきているので、簡易BlogをBackbone.jsとReact.jsの両方で実装して、比較してみました。 Demoではjs以外は同じサーバのAPIを使っているのでどちらにも反映されます。 Backbone.jsをつかったバージョン Source https://github.com/takeshy/backbone_socket_io Demo https://radiant-dawn-8878.herokuapp.com/backbone React.jsをつかったバージョン Source https://github.com/takeshy/react_socket_io Demo https://radiant-dawn-8878.herokuapp.com/react HTML部分
中規模開発のためのBackbone.js - webネタ
はじめに Backbone.jsを使って、管理画面を作ったときのことを備忘録も兼ねてまとめて記事にします。 Backboneは入門やHelloWorldはたくさん情報があるんですが、実際使うとなると色々と考えることが多くて大変です。少しでも役に立てればと思います。(･ω･ ) 開発メンバー 5人。JavaScript経験者2人。Backbone経験者0人。(･ω･`;).. 全員JavaやScalaの経験がそれなりにある。 まずはじめに 今回は、全員3日程度ですがBackbone.jsを勉強する時間がありました。 その間に自分がBackboneで一部分実装し、ベースを作成することに。 勉強に使ったのは、主に Backbone.jsガイドブック。 学習のとっかかりとしては、ドットインストールがいいんじゃないかと思います。 ベースの作成 コーディング規約 まずはJavaScriptのコーディン
Backbone.jsに入門してみる【Model+Collection+View連携編】 - yutaponのブログ
今回はModel, Collection, Viewの連携をしてみます。 設計 電話帳をずっと例にしてきたので今回も電話帳で。 電話帳は複数の電話情報の集合なので、 電話情報（Model） 電話帳（Collection） と整理することができます。 これらを表示するために、 1件あたりの電話情報を表示するView 電話情報の集合をラップするようなView が必要になります。 CollectionにModelが追加されたら Viewの方にも自動的に反映されるようにしたいところです。 実装 前に作ったコードを使いながら書いてみました。 htmlの部分はこんな感じ。 <!-- 電話情報が個々に埋め込まれる --> <div id="addressBook"></div> <!-- jsRenderのテンプレート --> <script id="address-template" type="te
Backbone.jsに入門してみる【Collection編】 - yutaponのブログ
Backbone.Collectionは本格的に使ったことがないです^^; ほんとの入門になります。 Backbone.Collectionとは CollectionはModelの集合を扱いたい場合に使います。 前回は電話帳を作ろうとしていたのですが、 電話情報がModelであって、それを束ねる電話帳がCollectionとなります。 また、CollectionはModelの集合に順序をもたせることができます。 Backbone.Collectionの使い方 前回作ったソースに追記して、Collectionを定義します。 var Address = Backbone.Model.extend({ defaults: function(){ return { language: 'jp' }; }, initialize: function(){ _.bindAll(this); this.
Backbone.jsに入門してみる【Model編】 - yutaponのブログ
今日はBackbone.Modelについてです。 Backbone.Collectionはあまり使ったことがないので、また別で扱います。 Backbone.Modelとは Modelといえば、MVCのMのことです。 DBから値を得たり、表示用に加工したり、ロジックを書いたりします。 注意したいのがDOM操作は行なわいということ。 DOM関連の処理はBackbone.Viewに集約して、 DOMとは関係のないロジックをBackbone.Modelに書くようにします。 これはメンテナンス性を上げるためにそうしたほうが良いということです。 Backbone.Modelの使い方 まずはBackbone.Modelを拡張して独自のモデルを作ります。 モデルを作ったらインスタンス化して使っていきます。 例として電話帳を考えてみます。 電話帳は電話番号に紐づく情報の集合からなっている気がするので、 まず
Backbone.jsに入門してみる【Events編】 - yutaponのブログ
普段からBackbone.js使ってますが、実は細かい仕様はわかっていなかったり^^; 初心に返って基礎的なところを振り返ります。 Backbone.jsって何？ Backbone.jsはクライアントサイドのMVCフレームワークです。 と、よく説明されますが、サーバーサイドで慣れ親しんだMVCとは 勝手が違うので、新しい気持ちで入門するのが大事です。 特徴としては最初の１回だけ同期通信を行い、 ２回目からは非同期通信を行うことで高速に表示できることがあります。 それとBackbone.jsが多用しているObserverパターンに則り コードを書くことで疎結合で拡張性の高いコードが出来上がります。 Backbone.jsを支えるunderscore.jsとjQuery Backbone.jsの本体コードが1000行ちょっとで出来上がっているのは underscore.jsとjQueryを利用
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
Parse.com を Backbone.js のバックエンドとして使ってみる - akiyoko blog
最近、BaaS(Backend as a Service) の代表格である「Parse.com」というサービスについて少し調べていたのですが、それを一旦まとめておこうと思います。 Parse.com の特徴 まず、Parse.com は、データストア＋API をクラウドで提供してくれるサービスです。 そのほかにも、 Parse.com は超メジャーな BaaS（2013年4月に Facebook に買収されているため、サービスの継続性も信頼できる） Parse.com はとりあえず無料で始められる（かつ、無料範囲が広い！） Parse.com を使うと、サーバアプリケーションを用意する必要がほぼない（クライアントアプリケーションの開発に集中できる） Parse.com はデフォルトで Facebook・Twitter と連携可能（ただし、どこまで連携できるかは要調査） Parse.com
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入門5 | Remote TestKit
Backbone.jsの最終回の今回は、Backbone.Router（以降、Router）について説明します。 はじめに 前回の「試して学ぶ Backbone.js入門4」 では実際に動くアプリケーションを作成しながらBackbone.Viewについて説明しました。 今回は本連載も最終回となり、Backbone.Router（以降、Router）について説明します。 今回のソースの全体はこちらで確認することができます。 Backbone.Router Backbone.jsが提供するRouterコンポーネントは、クライアント側でのページ遷移のイベントとその後の処理（コールバック関数）をマッピングするルーティング機能を提供します。 ViewがDOMイベントの発生を監視して、対応するメソッドに関連付けるように、Rounterはrouteイベントを監視して、対応するメソッドに関連付けます。 W
Re: Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - Webtech Walker
Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - @kyanny's blog Backbone.Routerは基本的にhistory APIやhashchangeを使ったSPAのためのルーティングをしてくれるものなので、SPAじゃない場合に使うのはあんまりオススメできない。 方法は色々だと思うけど、自分の場合はそういうケースでは次のような簡易的なURL Dispatcherを書いて対応することが多い。 dispatcher.js これをこんな感じで使う。 // main.js new Dispatcher() .route('.*', 'Common') .route('/', 'Top') .route('/user/([^/]+)', 'User') .dispatch({ path: locatio
試して学ぶ Backbone.js 入門のまとめ - Taste of Tech Topics
皆さん、こんにちは。id:KenichiroMurataです。 今回はKnowledge Noteにて連載させて頂いていた 「試して学ぶBackbone.js入門」が全５回分公開されたため、そのまとめをしたいと思います。 記事のコンセプト タイトルに含めた通り、実際にコードを書いて試してみることでBackbone.jsの理解を深めることを一番の目的としています。 なので、ぜひ実際に記事の中に出てくるコードを書いて、動かして、コンソールのログや動作を確認することをおススメします。 各記事の概要 第１回 試して学ぶBackbone.js入門 Backbone.jsの概要から、インストール方法、Model、Collectionの基本を説明しています。 目次 はじめに セットアップ Modelの基本 Collectionの基本 Collectionの便利な関数 第２回 試して学ぶBackbone.
(1/2) - 第一回 jQueryから始めるBackbone.js - 実践！Backbone - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる！」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの？ すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - k2works/backbone_introduction
今、改めてBackboneを評価する
