backbone.jsの練習

www.ipentec.com

Backbone.js でシンプルなModelを作成する - JavaScript プログラミング

https://www.ipentec.com/document/javascript-backbone-js-model-create-simple-model

1 ★ソースコード01
2 ★メモ
3 ★ソースコード03
4 メモ

★ソースコード01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
  <script type="text/javascript">
    
    $(function(){
      var Model = Backbone.Model.extend({
        defaults: {
          name: '',
          tag: '',
          price: 0
        }
      });
      
      var Model = new Model({
        name: 'ペンギンくん',
        tag: 'PC001',
        price: 350
      });
      
      var json = Model.toJSON();
      $('#output').html(JSON.stringify(json));
      
    });
  </script>
</head>
<body>
  <div id="output"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

var Model = Backbone.Model.extend({

defaults: {

tag: '',

price: 0

}

});

var Model = new Model({

tag: 'PC001',

price: 350

});

var json = Model.toJSON();

$('#output').html(JSON.stringify(json));

});

</script>

</head>

<body>

</body>

</html>

★メモ

creating-homepage.com

Bracketsインストール直後の自動初期設定項目 + おすすめの1設定項目

https://creating-homepage.com/archives/4182

Brakcetsをインストール直後に自動設定されていたメニューバーの初期設定を忘れてしまった……最初の頃に使えた便利な機能が使えなくなっている……という時に

Bracketsの自動閉じカッコは、「編集」→「自動閉じカッコ」でもとに戻す。

MDN Web Docs

Date.prototype.toJSON()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON

toJSON() メソッドは、Date オブジェクトを表す文字列を返します。

toJSON() メソッドは、Date オブジェクトを表す文字列を返します。
toJSON() の呼び出しは、Date オブジェクトの値を表す文字列 (toISOString() を使用) を返します。

const event = new Date('August 19, 1975 23:15:30 UTC');
const jsonDate = event.toJSON();
console.log(jsonDate);

const event = new Date('August 19, 1975 23:15:30 UTC');

const jsonDate = event.toJSON();

console.log(jsonDate);

MDN Web Docs

JSON.stringify()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりすることもできます。

JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。

console.log(JSON.stringify({x:5, y:6}));
//{"x":5,"y":6}

1 2	console.log(JSON.stringify({x:5, y:6})); //{"x":5,"y":6}

www.ipentec.com

Backbone.js でシンプルなModelを作成する - JavaScript プログラミング

https://www.ipentec.com/document/javascript-backbone-js-model-create-simple-model

モデルに設定された情報をJSON形式で取得します。
toJSON()メソッドを呼び出すことでJSON形式でモデルの情報を取り出せます。
取得したJSONを id=”output”のタグに表示します。

var json = model.toJSON();
$(‘#output’).html(JSON.stringify(json));

1 2	var json = model.toJSON(); $(‘#output’).html(JSON.stringify(json));

★ソースコード03

このコードは、「Set」ボタンをクリックすると。
modelオブジェクトのnameプロパティの値を
「ペンギンクッキー」から「くじらキャンディー」に変更している。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
  <script type="text/javascript">
    $(function() {
      var Model = Backbone.Model.extend({
        defaults: {
          name: '',
          tag: '',
          price: 0
        }
      });
      
      var model = new Model({
        name: 'ペンギンクッキー',
        tag: 'PC001',
        price: 350
      });
      
      var Button1View = Backbone.View.extend({
        tagName: 'input',
        id: 'button01',
        attributes: {
          type: 'button',
          value: '表示'
        },
        events: {
          'click': 'onClick'
        },
        
        onClick: function(event) {
          $('#output').append("name:" + model.get('name') + '<br/>');
          $('#output').append("tag: " +model.get('tag') + '<br/>');
          $('#output').append("price: " + model.get('price')+'<br/>');
        }
      });
      
      var Button2View = Backbone.View.extend({
        tagName: 'input',
        id: 'button02',
        attributes: {
          type: 'button',
          value: 'Set'
        },
        events: {
          'click': 'onClick'
        },
        onClick: function(event) {
          model.set('name', 'くじらキャンディー');
        }
      });
      
      var b1View = new Button1View;
      $('#ButtonFrame').append(b1View.el);
      var b2View = new Button2View;
      $('#ButtonFrame').append(b2View.el);
      
    });
  </script>
</head>
<body>
  <div id="ButtonFrame"></div>
  <div id="output"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

$(function() {

var Model = Backbone.Model.extend({

defaults: {

tag: '',

price: 0

}

});

var model = new Model({

tag: 'PC001',

price: 350

});

var Button1View = Backbone.View.extend({

tagName: 'input',

id: 'button01',

attributes: {

type: 'button',

value: '表示'

events: {

'click': 'onClick'

onClick: function(event) {

$('#output').append("name:" + model.get('name') + '<br/>');

$('#output').append("tag: " +model.get('tag') + '<br/>');

$('#output').append("price: " + model.get('price')+'<br/>');

}

});

var Button2View = Backbone.View.extend({

tagName: 'input',

id: 'button02',

attributes: {

type: 'button',

value: 'Set'

events: {

'click': 'onClick'

onClick: function(event) {

model.set('name', 'くじらキャンディー');

}

});

var b1View = new Button1View;

$('#ButtonFrame').append(b1View.el);

var b2View = new Button2View;

$('#ButtonFrame').append(b2View.el);

});

</script>

</head>

<body>

</body>

</html>

メモ

webtech-walker.com

Backbone.Modelのattributesにオブジェクト入れるときの注意 - Webtech Walker

http://webtech-walker.com/archive/2012/12/backbone_model_object.html

attributesはsetとかで設定される値をオブジェクトして持っているやつです。
Backbone.Modelのattributesにオブジェクトを設定するときの注意点など。

//まずsetでattributesを設定
var Model = Backbone.Model.extend();

var m = new Model();
m.set(‘hoge’, ‘fuga’);
m.set(‘foo’, {bar: ‘bax’));

//toJSONでattributesを取得して、値を更新する
var attrs = m.toJSON();
attrs.hoge = ‘new fuga’;
attrs.foo.bar = ‘new baz’;

console.log(m.attributes);
//=> { hoge: 'fuga', foo: { bar: 'new baz' } }

//まずsetでattributesを設定

var Model = Backbone.Model.extend();

var m = new Model();

m.set(‘hoge’, ‘fuga’);

m.set(‘foo’, {bar: ‘bax’));

//toJSONでattributesを取得して、値を更新する

var attrs = m.toJSON();

attrs.hoge = ‘new fuga’;

attrs.foo.bar = ‘new baz’;

console.log(m.attributes);

//=> { hoge: 'fuga', foo: { bar: 'new baz' } }

Qiita

Backbone.js 使い方メモ - Qiita

https://qiita.com/opengl-8080/items/36e9b380c64ba7766511

Backbone.js を勉強した時のメモ。Backbone.js とはCoffeeScript, Underscore.js などの作者である Jeremy Ashkenas が作っている JavaScript フレームワ...

（１）用意するファイル

（２）Model
①基本操作
・Modelを作成する
・インスタンス
・コンストラクタ
・staticメンバー
・プロパティの設定、取得
・プロパティのデフォルト値を設定
・コンストラクタの引数でプロパティを設定
・プロパティを持つか確認
・プロパティを削除
・プロパティを全て取得：attributes で全プロパティをオブジェクトで取得できる。

②Underscore.jsのメソッドを使う
③RESTfulリクエスト
④イベントの監視

（３）Collection
①基本操作
②Underscore.jsのメソッドを使う
③RESTリクエスト

（４）View
①Viewを作成する
②コンストラクタを定義する
③DOMオブジェクトを取得する
④jQueryオブジェクトを取得する
⑤既存のDOMを紐付ける
⑥ViewのDOMオブジェクトを起点にしてjQuery関数を使用する
⑦renderメソッド
⑧イベントハンドリングの定義を一箇所にまとめる

（５）Router
SPA なページを作る時に必要になる URL の操作や、 URL 変更のイベントを制御するための仕組みを提供してくれる。

①Routerを作成する

var MyRouter = Backbone.Router.extend();
var myRouter = new MyRouter();

1 2	var MyRouter = Backbone.Router.extend(); var myRouter = new MyRouter();

②コンストラクタを定義する

var MyRouter = Backbone.Router.extend({
	constructor: function() {
		console.log(‘constructor’);
	}
});
var myRouter = new MyRouter();

var MyRouter = Backbone.Router.extend({

constructor: function() {

console.log(‘constructor’);

}

});

var myRouter = new MyRouter();

③パスが変更された時のイベントハンドラを定義する
④パスを変更する
⑤ハッシュタグを使わない

（６）標準で用意されてるイベント
①Model
②Collection
③RESTリクエスト関係のイベント
④サーバーリクエストが成功した時のイベント
⑤サーバーリクエストが失敗したときのイベント

Qiita

静的なサイトに JavaScript のルーターを導入する - Qiita

https://qiita.com/masakielastic/items/2d43829edbac51ea366c

ホームページビルダーで生成された静的な HTML で構成されるサイトをリニューアルする際に JavaScript のルーターを導入して、検討したことや学んだことについて述べます。ルーターとはこのドキュメントでは、ルーターとは...

●ルーターとは
ルーターとは URL を解析して、URL のパターンごとに開発者が割り当てた関数もしくはメソッドを実行する機能をもつライブラリのことを指します。
ルーターの代わりにルーティングが同じ意味の用語として使われます。

●ねらい
ルーターを導入することで次の項目の改善が期待されます。
①保守性の向上
ルーターを導入する場合、レイアウトとコンテンツを分離することになります。
HTML ファイルはただ1つの index.html に限定されます。
コンテンツは別のテキストファイルとして保存して、Ajax 通信で取得することになります。
複数の HTML ファイルを提供する場合と比べて、レイアウトを修正する場合の作業量が減ります。
コンテンツを追加、修正する際に、誤って別の箇所を編集してしまう可能性が減ります。
結果として、テンプレートエンジンを導入する場合と同じ効果を得ることになります。

②ページの切り替え速度の向上
ページを切り替える際にコンテンツの部分だけ更新すればすむので、毎回ページをまるごと読み込む方法と比べて、通信量が減るので、結果として、ページの表示速度が向上します。
通信量をさらに減らすために localStorage や IndexedDB にコンテンツを保存する選択肢があります。

●検討課題
ルーターを採用するにあたり、次の項目を検討しました。
①URL の形式
②コンテンツの保存形式
③リンクの対象範囲
④ルーターとフレームワークの組み合わせ

並行して、次の項目を検討しました。
⑤通信量を減らすためのビルドツールの併用
⑥Ajax 通信ライブラリ

peeks-blog

基本、自分のために書いてるブログ。日々でそっとのぞいた、ちらっと見た物事の中から、自分が「これは！」と思った物事を備忘録としてまとめました。