PhilOwen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Backbone.jsで、DOMとそのイベントをすっきり使ってみる。

テキストボックスのキー入力をキャプチャして、
コンソールに出しつつ、サーバにポストしてみる
（このGistにサーバのコードは入れていないので、エラーが出る）。
また、Nextボタンを押すと、タイトルが変わる。
Backboneは、DOM操作をしやすくするための軽量ライブラリ。
AngularのようなMVCフレームワークでなく、
ミニマルなツールを目指しているので、
他のライブラリと衝突せず、簡単に組み合わせられる。

ユーティリティライブラリのunderscore.jsに依存していて、
こちらもシンプルで便利。
JSのイベントは、昔ながらにjQueryでゴリゴリ処理すると
かなりごちゃごちゃするが、BackboneのModelやViewを使うと
すっきりさせやすい。

また、ModelとそのCollectionは、
RESTなサーバと連携して、データベースとのやり取りもしやすい。
今回も、Modelのsave()を使った。
jQueryの低レベルなAJAX関数よりかなりわかりやすい。
今回、Modelとしては、超簡単に
srcのカスタム属性だけを持たせた。
BackboneのModelオブジェクトは属性の変更を監視できる。
（今回はその属性を変更せずに、オブジェクトを
まるごと入れ替えているので、通知が飛ばないが）

ViewへはそのModelを対応付けて、
ボタンのクリックと、テキストボックスへのキー入力を監視している。
References


Backbone.js公式
underscore.js公式


## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
  <script src="slide.js"></script>
  <script src="log.js"></script>
  <script src="main.js"></script>
</head>
<body></body>
</html>

## log.js
const Log = Backbone.Model.extend({
  url: '/logs',

  initialize: function(key, text) {
    this.set('key', key);
    this.set('text', text);
  },

  toString: function() {
    return this.get('key') + '-> ' + this.get('text');
  }
});

const LogView = Backbone.View.extend({
  initialize: function(model) {
    this.model = model;
    this.listenTo(model, 'change', this.render);
  },

  render: function() {
    this.$el.html($('<p>').text(this.model.get('key')));
    return this;
  }
});

## main.js
$(function() {
  let slide = new Slide('foo');
  let slideView = new SlideView(slide);
  let log = new Log(null, null);
  let logView = new LogView(log);

  const InputView = Backbone.View.extend({
    events: {
      'keydown input': 'keyDown',
      'click button': 'next'
    },

    render: function() {
      this.$el.
        append('<input type="text"></input>').
        append('<button>Next</button>');
      return this;
    },

    keyDown: function(e) {
      let log1 = new Log(e.key, $(e.target).val());
      log.set('key', e.key);
      console.log(log1.toString());
      log1.save();
    },

    next: function() {
      slideView.setModel(slide.next());
    }
  });

  let inputView = new InputView();

  $('body').
    append(slideView.render().$el).
    append(inputView.render().$el).
    append(logView.render().$el);
});

## slide.js
const Slide = Backbone.Model.extend({
  initialize: function(src) {
    this.set('src', src);
  },

  getSrc: function() {
    return this.get('src');
  },

  next: function() {
    return new Slide(new Date());
  }
});

const SlideView = Backbone.View.extend({
  initialize: function(model) {
    this.setModel(model);
  },

  setModel: function(model) {
    this.model = model;
    this.render();
  },

  render: function() {
    this.$el.html($('<h1>').text(this.model.getSrc()));
    return this;
  },
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
	<script src="slide.js"></script>
	<script src="log.js"></script>
	<script src="main.js"></script>
	</head>
	<body></body>
	</html>
	const Log = Backbone.Model.extend({
	url: '/logs',

	initialize: function(key, text) {
	this.set('key', key);
	this.set('text', text);
	},

	toString: function() {
	return this.get('key') + '-> ' + this.get('text');
	}
	});

	const LogView = Backbone.View.extend({
	initialize: function(model) {
	this.model = model;
	this.listenTo(model, 'change', this.render);
	},

	render: function() {
	this.$el.html($('<p>').text(this.model.get('key')));
	return this;
	}
	});
	$(function() {
	let slide = new Slide('foo');
	let slideView = new SlideView(slide);
	let log = new Log(null, null);
	let logView = new LogView(log);

	const InputView = Backbone.View.extend({
	events: {
	'keydown input': 'keyDown',
	'click button': 'next'
	},

	render: function() {
	this.$el.
	append('<input type="text"></input>').
	append('<button>Next</button>');
	return this;
	},

	keyDown: function(e) {
	let log1 = new Log(e.key, $(e.target).val());
	log.set('key', e.key);
	console.log(log1.toString());
	log1.save();
	},

	next: function() {
	slideView.setModel(slide.next());
	}
	});

	let inputView = new InputView();

	$('body').
	append(slideView.render().$el).
	append(inputView.render().$el).
	append(logView.render().$el);
	});
	const Slide = Backbone.Model.extend({
	initialize: function(src) {
	this.set('src', src);
	},

	getSrc: function() {
	return this.get('src');
	},

	next: function() {
	return new Slide(new Date());
	}
	});

	const SlideView = Backbone.View.extend({
	initialize: function(model) {
	this.setModel(model);
	},

	setModel: function(model) {
	this.model = model;
	this.render();
	},

	render: function() {
	this.$el.html($('<h1>').text(this.model.getSrc()));
	return this;
	},
	});