[ヅ] Backbone.js でシンプルなサンプルを書いてみた (2014-10-15)

Backbone.js でシンプルなサンプルを書いてみた (2014-10-15)

Backbone.js をちょっとだけ勉強中。

Backbone.js は MVC 構造を導入しやすい JavaScript フレームワーク。

Backbone.js を使うには、jQuery と Underscore.js も必要。

入力したテキストをリアルタイムで加工して表示する仕組みのベースになるサンプルコードを書いてみた (パソコン向けサンプル)。

サンプルのプログラムは、 Model が1つ、View が2つのシンプルな構成。InputView の状態が変わったら、それに合わせて Model (MessageCard) ともうひとつの View である CardView の状態が変わる仕組み。

InputView (View) -> MessageCard (Model) -> CardView (View) な流れ。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Backbone.js : Message Card Sample</title>
</head>
<body>
 
<div id='my-input-view'></div>
<div id='my-card-view'></div>
 
<script src="http://www.nilab.info/lib/js/jquery/2.1.1/jquery-2.1.1.min.js"></script>
<script src="http://www.nilab.info/lib/js/underscore/1.7.0/underscore-min.js"></script>
<script src="http://www.nilab.info/lib/js/backbone/1.1.2/backbone-min.js"></script>
 
<script type="text/html" id="input-view-template">
<div id="input-view" style="border: double 3px #00ff00;">
  <div>Input Your Message</div>
  <div><input id="input-title" type="text" value="<%= title %>"></input></div>
  <div><input id="input-message" type="text" value="<%= message %>"></input></div>
</div>
</script>
 
<script type="text/html" id="card-view-template">
<div id="card-view" style="border: double 3px #0000ff;">
  <div>Message Card</div>
  <div id="card-title">title: <%= title %></div>
  <div id="card-message">message: <%= message %></div>
</div>
</script>
 
<script>
var InputView = Backbone.View.extend({
 
  events: {
    'keyup #input-title': 'onEditTitle',
    'keyup #input-message': 'onEditMessage'
  },
 
  initialize: function(){
    console.log('InputView#initialize');
  },
 
  template: $('#input-view-template').html(),
 
  render: function(){
    console.log('InputView#render');
    var compiledTemplate = _.template(this.template);
    var data = this.model.toJSON();
    var html = compiledTemplate(data);
    this.$el.html(html);
    return this;
  },
 
  onEditTitle: function(){
    console.log('InputView#onEditTitle');
    this.model.set('title', $('#input-title').val());
  },
 
  onEditMessage: function(){
    console.log('InputView#onEditMessage');
    this.model.set('message', $('#input-message').val());
  },
});
 
var CardView = Backbone.View.extend({
 
  initialize: function(){
    console.log('CardView#initialize');
    this.model.bind('change', _.bind(this.render, this));
  },
 
  template: $('#card-view-template').html(),
 
  render: function(){
    console.log('CardView#render');
    var compiledTemplate = _.template(this.template);
    var data = this.model.toJSON();
    var html = compiledTemplate(data);
    this.$el.html(html);
    return this;
  },
});
 
var MessageCard = Backbone.Model.extend({
 
  initialize: function(){
    console.log("MessageCard#initialize");
    this.on('change', function(){
      console.log("MessageCard#change");
    });
    this.on('change:title', function(){
      console.log("MessageCard#change:title");
    });
    this.on('change:message', function(){
      console.log("MessageCard#change:message");
    });
  },
 
  defaults: {
    "title": "input your title",
    "message": "input your message",
  }
});
 
$(function(){
 
  var myMessageCard = new MessageCard();
  myMessageCard.set('title', 'hello, world');
 
  var myInputView = new InputView({
    model: myMessageCard
  });
 
  var myCardView = new CardView({
    model: myMessageCard
  });
 
  myInputView.render();
  myCardView.render();
 
  $('#my-input-view').html(myInputView.el);
  $('#my-card-view').html(myCardView.el);
});
 
</script>
</body>
</html>

サンプルはこちら → Backbone.js : Message Card Sample

参考書籍として Backbone.js アプリケーション開発ガイドを読んでいる。この本はわかりやすくて参考になる。

そういえば、以前にもサンプルを書いてた → [ヅ] Backbone.js でシンプルなサンプルを書いてみた (2014-05-07) ← Web の情報を少し見ただけであんまりよくわからず書いていた。

tags: backbone.js javascript

Posted by NI-Lab. (@nilab)

ヅラッシュ！ by NI-Lab.

Backbone.js でシンプルなサンプルを書いてみた (2014-10-15)