読者です 読者をやめる 読者になる 読者になる

by shigemk2

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

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にアクセスアクセス!

  1. ユーザー登録
  2. Dashboardでアプリ作成
  3. QuickStartGuideでnew project(zip)をdownload
  4. index.htmlでParse.initializeを置換
  5. ブラウザでindex.htmlを表示
  6. testボタンを押してみる
  7. 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>