introduction to Backbone.js with Parse #jscafe

細かなところは次回以降
backbone1 - Google Drive

フレームワークのひとつ
MV系

軽量でRESTベース

jQueryに依存してる
コミュニティが活発
情報量も比較的豊富だが、英語多し

Jeremy Ashkenas
backbone.js
coffeescript
とかの作者

JS node.js jQueryなどの基礎の基礎を教えてくれれぅ

Backbone.js
書籍もちょくちょく出てる

Backbone.jsガイドブックもおすすめ(ある程度前提知識は必要だけど)

なぜbackbone.js?

huluとかforesquareとかで使われてるよ

jsは書いてたらすぐスパゲティになっちゃう→整理・制御出来たらなあ

フレームワークは絶賛乱立中

model collection view routerの4つで構成されているけど、機械的に見ても面白くないぞ

Parseを使おう
BaaSクラウドサービス

Backend側のプログラム

てすと

backbone.jsにアクセスアクセス!

ユーザー登録
Dashboardでアプリ作成
QuickStartGuideでnew project(zip)をdownload
index.htmlでParse.initializeを置換
ブラウザでindex.htmlを表示
testボタンを押してみる
Got data!You saved your first object と出たら成功

参考画像1

参考画像2

参考画像3

Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
    var TestObject = Parse.Object.extend("TestObject"); // Parseとごにょごにょするお
    var testObject = new TestObject(); // テストを始めるお
      testObject.save({foo: "bar"}, { // テーブルを使うお fooとbarで保存するお
      success: function(object) { // 成功
        $(".success").show();
      },
      error: function(model, error) { // 失敗
        $(".error").show();
      }
    });

<!doctype html>
<head>
  <meta charset="utf-8">

  <title>My Parse App</title>
  <meta name="description" content="My Parse App">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
</head>

<body>
  <div id="main">
    <form id="todo_form">
      <input type="text" id="title"/>
      <input type="submit"/>
    </form>
    <div id="error"></div>
    <div id="results_todo_list">
      <ul></ul>
    </div>
    <span class='help' style="display:none;">text入れて送信するだけね<a href='#main'>戻る</a></span>
  </div>

  <script type="text/javascript">
    $(function(){
      // さっきやったやつ
      Parse.initialize("APP_ID", "JS_KEY");
      // ここに以降、追加していきます
      var Todo = Parse.Object.extend({
        className:"Todo",
        validate: function(attrs){
          if(_.isEmpty(attrs.title)){
            return "please write text!";
          }
        }
      });

      var TodoList = Parse.Collection.extend({ model: Todo });

      var TodoView = Parse.View.extend({
        template: _.template($('#todo-template').html()),
        render: function(){
          this.$el.html(this.template(this.model.toJSON()));
          return this;
        }
      });

      var TodoListView = Parse.View.extend({
        el: "#results_todo_list > ul", // 放り込む場所を指定
        initialize: function(){ // 初期化
        this.collection.on("add", this.add_todo, this); // collectionの追加等に対応
          this.render();
        },
        add_todo: function(todo){
          var todoView = new TodoView({model:todo});
          this.$el.append(todoView.render().el);
          $('#title').val('').focus();
        },
        render: function() {
          this.collection.each(function(todo) {
            this.add_todo(todo);
          },this);
          return this;
        }
      });

      var TodoFormView = Parse.View.extend({
        el: "#todo_form",
        events: {
          "submit": "create_todo"
        },
        create_todo: function(e) {
          e.preventDefault();
          var todo = new Todo();
          todo.set({title : $('#title').val()},
                   {error : function(model, error) {
                      $('#error').html(error);
                    }});
          if(todo.isValid()) {
            $('#error').html('');
            var todo_form = this;
            todo.save(null, {
              success: function(todo) {
                todo_form.collection.add(todo); 
              }
            });
          };
        }
      });

      var AppView = Parse.View.extend({
         initialize: function(){
           this.render();
         },
         render: function(){
           new Parse.Query("Todo").find({
             success: function(list){
               var todoList = new TodoList(list);
               var todoListView = new TodoListView({collection: todoList});
               var todoFormView = new TodoFormView({collection: todoList});
             }
           });
           return this;
         }
       });
      new AppView;

      var TodoRouter = Parse.Router.extend({
        routes: {
          "help" : "show_help",
          "main" : "show_main"
        },
        show_help : function() {
          $('#main').hide();
          $("span.help").show();
        },
        show_main : function() {
          $("span.help").hide();
          $('#main').show();
        }
      });
      var todoRouter = new TodoRouter;
      Parse.history.start();
    });
  </script>
  <script type="text/template" id="todo-template">
    <strong>[TODO]</strong>
    <span><%- title %></span>
  </script>
</body>

</html>

by shigemk2

当面は技術的なことしか書かない

introduction to Backbone.js with Parse #jscafe

なぜbackbone.js?