先日、ドットインストールで公開されているBackbone.js 入門をやりました。 最終更新が 2013 年 3 月 12 日となっています。 一通りやりこなせましたが、時に現代は 2020 年、1 つのファイルにすべて書いてゆくのは今っぽくない(のかな？)。 今回は webpack を使ってモジュールで分割し、Backbone.js 入門に取り組んでみます。 目次
Backbone.js入門 を 2020年的に取り組んでみる
先日、ドットインストールで公開されているBackbone.js 入門をやりました。 最終更新が 2013 年 3 月 12 日となっています。 一通りやりこなせましたが、時に現代は 2020 年、1 つのファイルにすべて書いてゆくのは今っぽくない(のかな？)。 今回は webpack を使ってモジュールで分割し、Backbone.js 入門に取り組んでみます。 目次
Backbone.MarionetteアプリをWebpackでバンドルする - Qiita
今まで、Browserlifyを利用していましたが、Webpackに切り替えました。Webpackの方が使い方も簡単で、これからモジュールバンドルを利用される方は、Webpackを使う方がいいのではないでしょうか。 なんでもjsへ変換してくれます。 バンドルサンプル バンドルの例として以下のようなモジュールを利用するWebアプリのバンドル方法を示します。全体はGithubに置いてあります。 https://github.com/notice/backbone-marionette backbone backbone.marionette jade lodash jquery 最近では、少し古く感じてしまうBackboneですが、Marionetteの方はv3（現時点最新はv2.4）へ向けて開発が進められています。 v3ではMarionetteのモジュールは廃止されるようです。Marione
TypescriptでBackbone.jsを書く際に気をつけるポイント - Qiita
この度、既存のBackbone.js環境をTypescriptに移行したので注意点などをご紹介します。 型定義はDefinitelyTypedから取得して使っています。 Model 最大の問題は、Modelのgetメソッドの戻り値がany型になってしまうという点です。 このままだと型のメリットが全く受けられません。 そのため、getを使うのをやめてattributesの値を直接見るのが良いです。 内部的にはgetメソッドはattributesの値を返しているだけなので問題ないです。 まず以下のような抽象クラスを定義します abstract class TypedModel<Props> extends Backbone.Model { public attributs: Props }
javascript - Issue adding access token to header in Backbone: It changes the method - Stack Overflow
Backbone.jsにCSRF対策のトークンをpostさせる
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたーでは、ユーザーの情報をサーバー側のモデルと同期させるために、Backbone.jsを使っているのだけど、Backbone.jsは結構特殊な、だけどなんかモダンっぽい仕組みでサーバーと通信する仕組みになってる。 普通、postするときは、name=“Takazudo” age=“28” みたいなデータをサーバーに投げるわけだけど、Backbone.jsは、以下のような、データをtoJSONした文字列をボコっとそのままサーバーに投げ、サーバー側でもそのJSON上手いことなんかやってくれっていう仕組みになってる。 { "name": "Takazudo", "age": "28" }
Backbone.jsをTypeScriptから使用する - Qiita
class model_Sample extends Backbone.Model { constructor(attributes?: any, options?: any) { super(attributes, options); } } class collection_Sample extends Backbone.Collection<model_Sample> { constructor(models?: model_Sample[] | Object[], options?: any) { // どちらの記述でも可。 this.url = "/sample_url"; this.url = function() { return ("/sample_url"); }; super(models, options); this.on("add", this.evt_appen
TypeScriptを使ったBackbone.jsアプリケーションの書き方 - yutaponのブログ
先日TypeScript使ってBackbone.jsのアプリケーションを書いて、いろいろハマったので備忘録的に書いておきます。 はじめに 既にTypeScript+Backbone.jsのサンプルはいくつか上がってたりします。 有名なのはTypeScript+Backbone.jsでTodoアプリケーションを作るやつ。 tastejs/todomvc 非常に簡単そうなのですが、型定義を独自に書いてあります。 個人的には、型定義はDefinitelyTypedでホストされているやつを使いたく、上述したサンプルコードではあまり参考にならなかったりします。 あとどうせならコンパイルオプションの--module amdを試したかったので、RequireJSを使ってモジュール管理をしようと思います。 (browserifyの使い方ちゃんとわかってない) エディタについて いつもはSublime2(o
Backbone.jsにUIバインディング機能を付ける拡張ライブラリ「Epoxy.js」 - Qiita
Backbone.jsはJavaScriptのMVCフレームワークの中では縛りが緩めで柔軟な使い方ができる(らしい)一方、ModelとDOM要素を関連付けて自動的に連動するような便利機能、いわゆるUIバインディングをサポートしていません。Modelが変更された時に発火されるイベント先で自力でDOMに反映させたり、DOMでのイベント発生時にModelに反映させる処理を自力で書く必要があります。 そんなBackbone.jsのUIバインディングライブラリを自作しようと思い情報収集をしていたら、すでに完成度の高いライブラリがあったのでちょっと試してみました。 ダウンロードやその他詳細はこちらの本家でどうぞ。 日本語の情報はほぼなかったので(まあ本家のサンプルコード見るだけで大体分かるっていうのもあると思いますが)、ここでは簡単な使い方とかをメモしておこうと思います。 基本的なサンプル <div
快適アプリ開発Backbone.Marionette | 第1回 Backbone.Marionetteとは
それぞれ、このシリーズの後続の回で詳しく触れていきますが、Application、AppRouter、ControllerはViewやModelの間を取り持つ機能を担っています。ItemView、CollecttonView、CompositeView、Region、Layoutはそれぞれ異なった役割で、View周りのコーディングに役立つ機能を持っています。 Marionette.jsにできること Marionette.jsから得られる恩恵は大小さまざまで、細かいものを挙げていくときりがないほどですが、大きなものを挙げるとすれば、次のような点があります。 モジュール化のサポート 開発者が書かなければならないコード量の減少 機能の部分的な利用 モジュール化のサポート Marionette.jsの機能の中で大きなものとして、モジュール化のサポートがあります。モジュール化というのは、ある機能を表
Marionette.jsを使おう - Qiita
Help us understand the problem. What is going on with this article? この記事は「Gunosy Advent Calendar 2014」の21日目の記事です。 Gunosyの広告配信チームでJavascriptおじさんをやってるaitaです。 最近Gunosyに入社しました。フロントエンドエンジニアではない。 今年はMarionette.jsをいろんなとこで使ってたので、Marionette.jsの紹介します。 Marionette.jsの各コンポーネントについては、 ドキュメントとソース読むのが一番だと思うので書きません。 何故、Marionette.jsを使うのか AngularJS使いたくないからというのは半分冗談です。 僕がMarionette.jsを使い始めた理由は、Backbone.jsがもともと採用事例があっ
Jasmine による Backbone.js の単体テストことはじめ - Qiita
目的 Backbone.js の単体テストを行うための環境を用意する。 動機 僕は普段 Rails をよく使うプログラマーなのですが、今まで JavaScript の単体テストも書かなきゃと思いつつ、ずっとスルーし続けてきました。しかし、最近はフロントエンドに Backbone.js や Marionette.js を使い、複雑な処理を書くことも増えてきたので、ついに重い腰を上げて JavaScript の単体テストを書くことにしました。 また Babel の導入により機能のモジュール分割が容易になったことも、単体テストを書き始めようと思い立った要因のひとつでもあります。 主なツール テストフレームワーク 最近は Mocha をよく聞きますが、Google トレンドで調べたところ Jasmine の方が人気がありそうだったので、今回はこちらを採用しました。BDD (ビヘイビア駆動開発) 形
Marionette.jsをTypeScriptで使う - Qiita
この記事はTypeScript Advent Calendarの5日目の記事です。 最近Marionette.js+TypeScriptを自社開発のeラーニングシステムeden LMSにも少しずつ投入しはじめていて、なかなか良い感じだと思っています。この記事は、TypeScript+Marionette.jsのサンプルを示しつつ、簡単に使い方を説明していくという内容になっています。 そもそもMarionette.jsとは Marionette.jsの知名度が心配なので簡単に補足しておきます。Marionette.jsは、JavaScriptのMVCフレームワークであるBackbone.jsを、さらに簡単に利用するためのライブラリ、といったところです。Backbone.jsはその名前の通り、良くも悪くも「背骨」にあたる機能を提供するフレームワークであり、実際の開発に使おうとすると、こまごまと
High level steps to setting up Twitter Typeahead.js to work with Backbone.js
tl;dr To use Twitter Typeahead.js with Backbone.js, you need to set up the typeahead function in a Backbone view’s render(). And you need to style the typeahead dropdown appropriately with css. What is Twitter Typeahead? Twitter Typeahead is a autocomplete/suggestion engine made for text fields on websites. As a dependency, Typeahead requires jQuery. Typeahead with Backbone 1 Check the Typeahead e
introduction to Marionette.js (jscafe14)
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Artyom Trityak
Backbone.jsに入門してみる【Router編】 - yutaponのブログ
久しぶりのBackbone.js入門。 Backbone.jsガイドブックを見ながらまとめてますが、 後半は試行錯誤のたまもの。 Backbone.Routerとは Backbone.RouterはサーバーサイドMVCフレームワークでいうところのCにあたる部分、でもありますし、VCでもあります。 Backbone.ViewがDOMを監視するのに対して、Backbone.Routerはブラウザのハッシュ（URL欄）を監視します（厳密に言うとhashChangeイベントとpopStateイベントを監視）。 Backbone.Routerにハッシュとそれに対応する操作を設定しておくことで、 アプリケーション全体のコントローラみたいなふるまいをします。 Backbone.Routerの使い方 何はともあれサンプルコードを。 // @file router_sample.js var Router
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Marionette.js】入門 ~導入方法~ - Tech Design
Typescript Backbone View Events do not fire
How do I auto redirect to the login page when the session is expired in Backbone.js?
backbone handle sessions expiring
GitHub - tastejs/todomvc-backbone-es6: Backbone TodoMVC rewritten using ES6
