coding-kata · azu · Jan 22, 2015 · Jan 21, 2015 · Jan 21, 2015 · Jan 21, 2015
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,71 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+
+### Ruby template
+*.gem
+*.rbc
+/.config
+/coverage/
+/InstalledFiles
+/pkg/
+/spec/reports/
+/test/tmp/
+/test/version_tmp/
+/tmp/
+
+## Specific to RubyMotion:
+.dat*
+.repl_history
+build/
+
+## Documentation cache and generated files:
+/.yardoc/
+/_yardoc/
+/doc/
+/rdoc/
+
+## Environment normalisation:
+/.bundle/
+/lib/bundler/man/
+
+# for a library or gem, you might want to ignore these files since the code is
+# intended to run in multiple environments; otherwise, check them in:
+# Gemfile.lock
+# .ruby-version
+# .ruby-gemset
+
+# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
+.rvmrc
+
+
+
+test/log
+public/js/build
diff --git a/.testiumrc b/.testiumrc
@@ -0,0 +1,3 @@
+launch=true
+[app]
+port=9295
diff --git a/Gemfile b/Gemfile
@@ -0,0 +1,4 @@
+source :rubygems
+
+gem 'sinatra'
+gem 'json'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -0,0 +1,19 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    json (1.8.2)
+    rack (1.6.0)
+    rack-protection (1.5.3)
+      rack
+    sinatra (1.4.5)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (~> 1.3, >= 1.3.4)
+    tilt (1.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  json
+  sinatra
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "monologue",
+  "version": "1.0.0",
+  "description": "coding kata @ monologue",
+  "main": "index.js",
+  "scripts": {
+    "start": "rackup --port 9295",
+    "build": "mkdir -p public/js/build/ && browserify public/js/app.js -o public/js/build/app.js",
+    "watch": "mkdir -p public/js/build/ && watchify public/js/app.js -o public/js/build/app.js",
+    "test": "mocha test/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coding-kata/monologue"
+  },
+  "keywords": [
+    "ruby",
+    "test",
+    "e2e"
+  ],
+  "author": "azu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/coding-kata/monologue/issues"
+  },
+  "homepage": "https://github.com/coding-kata/monologue",
+  "devDependencies": {
+    "browserify": "^8.1.1",
+    "espower-loader": "^0.10.0",
+    "intelli-espower-loader": "^0.6.0",
+    "mocha": "^2.1.0",
+    "phantomjs": "^1.9.13",
+    "power-assert": "^0.10.1",
+    "testium": "^2.3.0",
+    "watchify": "^2.2.1"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,9 @@
   <title>Monologue</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
   <script src="js/jquery.js"></script>
-  <script src="js/app.js"></script>
+  <script src="js/underscore.js"></script>
+  <script src="js/backbone.js"></script>
+  <script src="js/build/app.js"></script>
 </head>
 <body>
 <div class="container">
@@ -13,14 +15,14 @@
         <a class="brand" href="#">Monologue</a>
     </div>
   </div>
-  <form class="row">
+  <form class="row" id="js-new-status">
     <textarea name="status"></textarea>
     <button type="submit" class="btn">Post Update</button>
   </form>
 
   <ul id="statuses" class="row">
 
-  </ul>  
+  </ul>
 </div>
 </body>
 </html>
diff --git a/public/js/Constants/status-constant.js b/public/js/Constants/status-constant.js
@@ -0,0 +1,6 @@
+// LICENSE : MIT
+"use strict";
+var action = {
+    STATUS_ADD: "add"
+};
+module.exports = action;
diff --git a/public/js/Dispatcher/status-dispatcher.js b/public/js/Dispatcher/status-dispatcher.js
@@ -0,0 +1,5 @@
+// LICENSE : MIT
+"use strict";
+
+var dispatcher = _.clone(Backbone.Events);
+module.exports = dispatcher;
diff --git a/public/js/Models/Status.js b/public/js/Models/Status.js
@@ -0,0 +1,6 @@
+// LICENSE : MIT
+"use strict";
+var Status = Backbone.Model.extend({
+    url: "/statuses"
+});
+module.exports = Status;
diff --git a/public/js/Models/StatusCollection.js b/public/js/Models/StatusCollection.js
@@ -0,0 +1,14 @@
+// LICENSE : MIT
+"use strict";
+var Status = require("./Status");
+var StatusList = Backbone.Collection.extend({
+    model: Status
+});
+StatusList.prototype.fetchList = function (options) {
+    $.ajax({
+        url: '/statuses',
+        dataType: 'json',
+        success: options.success
+    });
+};
+module.exports = StatusList;
diff --git a/public/js/Views/NewStatusView.js b/public/js/Views/NewStatusView.js
@@ -0,0 +1,27 @@
+// LICENSE : MIT
+"use strict";
+/**
+ * @type {Backbone.Events}
+ */
+var emitter = require("../Dispatcher/status-dispatcher");
+var action = require("../Constants/status-constant");
+var NewStatusView = Backbone.View.extend({
+    initialize: function (options) {
+        var that = this;
+        this.collection.on(action.STATUS_ADD, this.clearInput, this);
+        $(this.el).on('submit', function (event) {
+            event.preventDefault();
+            that.addStatus(event);
+        });
+    },
+    addStatus: function (event) {
+        this.collection.create({
+            text: $(this.el).find("textarea").val()
+        });
+    },
+    clearInput: function clearInput() {
+        $(this.el).val("");
+    }
+});
+
+module.exports = NewStatusView;
diff --git a/public/js/Views/StatusesView.js b/public/js/Views/StatusesView.js
@@ -0,0 +1,17 @@
+// LICENSE : MIT
+"use strict";
+/**
+ * @type {Backbone.Events}
+ */
+var emitter = require("../Dispatcher/status-dispatcher");
+var action = require("../Constants/status-constant");
+var StatuesView = Backbone.View.extend({
+    initialize: function (options) {
+        this.collection.on(action.STATUS_ADD, this.appendStatus, this);
+    },
+    appendStatus: function (status) {
+        $(this.el).append('<li>' + status.escape("text") + '</lib>');
+    }
+});
+
+module.exports = StatuesView;
diff --git a/public/js/app.js b/public/js/app.js
@@ -1,25 +1,22 @@
-jQuery(function($) {
-  $('form').on('submit', function() {
-    $.ajax({
-      url: '/statuses',
-      type: 'POST',
-      dataType: 'json',
-      data: {text: $(this).find('textarea').val()},
-      success: function(data) {
-        $('#statuses').append('<li>' + data.text + '</li>');
-      }
+var StatusList = require("./Models/StatusCollection");
+var NewStatusView = require("./Views/NewStatusView");
+var StatusesView = require("./Views/StatusesView");
+jQuery(function ($) {
+    var statuses = new StatusList();
+    new NewStatusView({
+        el: $('#js-new-status'),
+        collection: statuses
+    });
+    new StatusesView({
+        el: $('#statuses'),
+        collection: statuses
+    });
+    statuses.fetchList({
+        success: function (data) {
+            var $statuses = $('#statuses');
+            for (var i = 0; data.length > i; i++) {
+                $statuses.append('<li>' + data[i].text + '</li>');
+            }
+        }
     });
-    return false;
-  });
-
-  $.ajax({
-    url: '/statuses',
-    dataType: 'json',
-    success: function(data) {
-      var $statuses = $('#statuses');
-      for(var i = 0; data.length > i; i++) {
-        $statuses.append('<li>' + data[i].text + '</li>');
-      }
-    }
-  })
 });