概要
普段は、vue.jsなどを使っていますが、backbone.jsを使うことがあったので、学習してみる。
ローカル環境整備
dockerでnginxを起動して環境を整える。
ターミナル
$ docker-compose build
$ docker-compose up -d
※ 学習ように作ったコードはgithubにアップしています
https://github.com/reflet/sample-backbone.js
サンプルコード
とりあえず、必要なjsを読み込んで、動かしてみました。
./src/html/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習</title>
</head>
<body>
<h1>TOP Page</h1>
<p>ひとまず動く環境を整えてみる。</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({
defaults: {
country: '日本',
prefecture: '東京',
},
hello: function() {
console.log('こんにちは、' + this.get('name') + 'さん');
}
});
const user = new Person({name: '太郎', age: 30});
// データ確認
console.log(user.toJSON()); // {country: "日本", prefecture: "東京", name: "太郎", age: 30}
// 名前を取得する
console.log(user.get('name'));
// 独自定義した関数を実行してみる
user.hello();
</script>
</body>
</html>
動作確認
正常に処理され、コンソールに結果が表示されたようです。
まとめ
underscore.min.js, jquery.min.js, backbone.min.js を読み込めば使える点は、vue.jsと同じでお手軽で導入コストは低そうですね。