JavascriptのMVC開発について調べてみた 〜BACKBONE.JS〜 を参考にして、 Backbone.js を使ったシンプルなカウンターのサンプルを書いてみた。

サンプル⇒ Counter using Backbone.js and jQuery

サンプルのソースコードをここに貼っておく。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter using Backbone.js and jQuery</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" language="javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript" src="underscore.js"></script>
<script type="text/javascript" language="javascript" src="backbone.js"></script>
<script>
 
$(function(){
  var model = new CountModel();
  var view = new CountView({model : model});
});
 
var CountModel= Backbone.Model.extend({
 
  defaults: {
    "count" : 0
  },
  
  getCount : function (){ 
    return this.get("count"); 
  },
  
  countUp : function (){
    var count = this.get("count");
    count++;
    this.set("count", count);
  }
});
 
var CountView = Backbone.View.extend({
  
  // http://backbonejs.org/#View-el
  el : "#count-view",
 
  initialize : function(){
    this.listenTo(this.model, "change", this.render);
  },
    
  render : function(){
    var count = this.model.getCount();
    // this.$el.find("#count-number").text(count);
    this.$("#count-number").text(count);
  },
 
  events:{
    "click button" : "onClickButton"
  },
  
  onClickButton : function(e){
    this.model.countUp();
  }  
});
</script>
</head>
<body>
 
<div id="count-view">
  <div>
    <span id="count-number">0</span>
  </div>
  <div>
    <button>countup</button>
  </div>
</div>
 
</body>
</html>

Backbone.js を動かすには Underscore.js が必要。

tags: backbone.js javascript

Posted by NI-Lab. (@nilab)