<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>BACKBONE.JS</title>
<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
</head>
<body>
<h1>Backbone.js</h1>
<div id="user"></div>
<script type="text/template" id="user_template">
<dl>
<dt>name</dt><dd><%= name %></dd>
<dt>age</dt><dd><%= age %></dd>
<dt>datetime</dt><dd><%= datetime %></dd>
</dl>
</script>
<script src="app.js"></script>
</body>
</html>
(function(){
var UserModel = Backbone.Model.extend({
defaults: {
datetime: new Date().toISOString()
},
initialize: function(attrs, options) {
}
});
var UserView = Backbone.View.extend({
initialize: function(options) {
},
render: function() {
$(this.$el).html(_.template($("#user_template").html(), this.model.attributes));
}
});
var um = new UserModel({name: "TARO", age: 20});
var uv = new UserView({el: $("#user"), model: um});
uv.render();
}());
