概要

Backbone.jsのコレクションでAjax通信してリストを動的に取得してみる。

ローカル環境整備

dockerでnginxを起動して環境を整える。

ターミナル

$ docker-compose build
$ docker-compose up -d

※ 学習ように作ったコードはgithubにアップしています
https://github.com/reflet/sample-backbone.js

Ajax通信の準備

Collectionで扱うデータをAjaxで非同期通信にて取得するため、jsonファイルを準備する。

./src/html/api/users.json

[
  {"country": "日本", "prefecture": "東京都", "name": "太郎", "age": "30"},
  {"country": "日本", "prefecture": "大阪府", "name": "次郎", "age": "28"},
  {"country": "日本", "prefecture": "愛知県", "name": "花子", "age": "25"},
  {"country": "日本", "prefecture": "福岡県", "name": "三郎", "age": "15"},
  {"country": "日本", "prefecture": "東京都", "name": "四郎", "age": "25"}
]

サンプルコード

Ajaxで動的にデータを取得するCollectionを作成してみました。
※ データの取得先： GET http://localhost:8080/api/users.json

./src/html/collection1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Backbone.js学習 [Collection]</title>
</head>
<body>
    <h1>Collection</h1>
    <p>Collectionで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>
        // Model
        const Person = Backbone.Model.extend({
            defaults: {
                country: '日本',
                prefecture: '東京',
                name: '',
                age: null,
            }
        });

        // Collection
        const Users = Backbone.Collection.extend({
            model: Person,
            url: '/api/users.json',
            parse: function(response){
                console.log(response);
                return response;
            }
        });
        const users = new Users();
        users.fetch().done(function(users){
            $.each(users, function(index, user){
                console.log(index, user);
            });
        });
    </script>
</body>
</html>

動作確認

正常にデータが取得できたようです。

参考サイト