Backbone.js サンプル1

<!DOCTYPE html>
<html lang="ja">



Backbone.js




Backbone.js




(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();
}());

Backbone.js 設置

  • 以下のURLからZIPファイル等のリポジトリをダウンロードする。
  • 展開したフォルダの中の以下のファイルを自分のプロジェクトフォルダにコピーして設置する。
    • backbone.js
    • test/vendor/underscore.js
    • test/vendor/jquery.js

技術情報 / JavaScript / Backbone.js / サンプル1

Backbone.js サンプル1

<!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();
}());