概要
Backbone.jsのモデルを使ってみる
ローカル環境整備
dockerでnginxを起動して環境を整える。
ターミナル
$ docker-compose build
$ docker-compose up -d
※ 学習ように作ったコードはgithubにアップしています
https://github.com/reflet/sample-backbone.js
AJAX通信の準備
Modeで扱うデータをAjaxで非同期通信にて取得するため、jsonファイルを準備する。
./src/html/api/user/1.json
{"country": "日本", "prefecture": "東京都", "name": "太郎", "age": "30"}
サンプルコード
Ajaxで動的にデータを取得するModelを作成してみました。
※ データの取得先： GET http://localhost:8080/api/user/1.json
./src/html/model1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Model]</title>
</head>
<body>
<h1>Model</h1>
<p>ModelでAjax通信して動的にデータを取得する</p>
<script src="https://cdn.jsdelivr.net/npm/underscore@1.9.1/underscore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/backbone@1.4.0/backbone.min.js"></script>
<script>
const Person = Backbone.Model.extend({
urlRoot: '/api/user',
url: function () {
var url = Backbone.Model.prototype.url.apply(this);
return (this.isNew()) ? url : url + '.json';
},
parse: function (response) {
response.datetime = new Date(response.datetime);
return response;
}
});
var user = new Person({id: 1});
console.log(user.url()); // /api/user/1.json
// Ajax通信でデータを取得する
// ※ GET /api/user/1.json
user.fetch()
.done(function(user){
console.log(user);
});
// Ajax通信でデータを取得する ← GETパラメータを追加してみる
// ※ GET /api/user/1.json?limit=5&offset=0
user.fetch({data:{limit: 5, offset: 0}})
.done(function(user){
console.log(user);
});
</script>
</body>
</html>
動作確認
正常にデータが取得できたようです。
まとめ
Ajax通信する際、IDを自動でURLに追加してくれるのはいい。
しかし、.jsonという拡張子をリクエストするURLに追加したくて調べるたがなかなか見つからず...
そのため、backbone.jsのurlのプログラムを参照して上書きする形で書いてみる。