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)