eyeballs 0.4.2 → 0.5.0

data/CHANGELOG

@@ -1,3 +1,20 @@
+Sat Jul 17
+- - - - - -
+- Remove data-controller data-action stuff. "data-bind" is way better.
+
+Wed Jul 14 2010
+- - - - - - - -
+- Add 'url' parameter for destroy
+- Add errors.on for finding errors
+
+Fri Jul 9
+- - - - - 
+- Add 'create' method
+- Add 'url' parameter for save
+- Specify whether to use a json_root (for Rails etc.)
+- Allow specifying the json_root name
+- Allow specifying a CSRF token
+
 Wed Jul 7 2010
 - - - - - - - -
 - Add namespace and root support in routing

data/Gemfile

@@ -10,4 +10,5 @@ end
 
 group :test do
   gem 'rspec'
+  gem 'ruby-debug'
 end

data/Gemfile.lock

@@ -1,5 +1,9 @@
 --- 
 dependencies: 
+  ruby-debug: 
+    group: 
+    - :test
+    version: ">= 0"
   thor: 
     group: 
     - :default
@@ -23,6 +27,8 @@ dependencies:
 specs: 
 - activesupport: 
     version: 2.3.8
+- columnize: 
+    version: 0.3.1
 - json_pure: 
     version: 1.4.3
 - gemcutter: 
@@ -33,15 +39,21 @@ specs:
     version: 2.0.4
 - jeweler: 
     version: 1.4.0
+- linecache: 
+    version: "0.43"
 - rack: 
     version: 1.2.1
 - rspec: 
     version: 1.3.0
+- ruby-debug-base: 
+    version: 0.10.3
+- ruby-debug: 
+    version: 0.10.3
 - sinatra: 
     version: "1.0"
 - thor: 
-    version: 0.13.7
-hash: 17f409790dfc3ab7e279201874a3aab85e4c7c95
+    version: 0.13.8
+hash: 18ee2e0d3e9a46cd1d8e8c39951ba9414860f401
 sources: 
 - Rubygems: 
     uri: http://gemcutter.org

data/README.md

@@ -118,7 +118,7 @@ Not very exciting.
 However, if you're familiar with Rails, you'll be familiar with the wonderful syntax for adding validations to your models. eyeballs.js lets you add validations to your models as follows:
 
     o_O('Post', function(post){
-      post.validates_presence_of('title)
+      post.validates_presence_of('title')
     })
 
 Now, when you initialize a new Post, you can validate it, nice and easy:
@@ -255,52 +255,30 @@ Tasty!
 
 #### Binding actions to events ####
 
-To bind events to these controller actions, use the data-controller and data-action attributes:
+To bind events to these controller actions, use the data-bind attribute:
 
-    <a href="/posts/new" data-controller="posts" data-action="new">Click me!</a>
+    <a href="/posts/new" data-controller="posts#new">Click me!</a>
 
 This binds all clicks on this element to the new action on the PostsController. By default, if you add these attributes to a form, the action is bound to the submit event; to all other elements it binds to a click.
 
-It also returns false, canceling out the default behavior. If you want the default behavior, you can add `data-default=true`:
+It also returns false, canceling out the default behavior. If you want the default behavior, prefix with `+`  to "add" the action to the propagation chain:
 
-    <a href="/posts/new" data-controller="posts" data-action="new" data-default="true">Click me!</a>
+    <a href="/posts/new" data-controller="+posts#new">Click me!</a>
     
-You can also bind to custom events, using data-event:
+You can also bind to custom events:
 
-    <a href="/posts/new" data-controller="posts" data-action="new" data-default="true" data-event="mouseover">Hover over me!</a>
+    <a href="/posts/new" data-controller="+mouseover:posts#new">Hover over me!</a>
     
-There's also a shorthand for binding:
+You can bind multiple events and actions to a single element:
 
-Bind clicks to PostsController#new
-
-    <a href="/posts/new" data-bind="posts/new">Click me!</a>
-    
-Disable returning false to continue propagating new events:
-
-    <a href="/posts/new" data-bind="+posts/new">Click me!</a>
-
-Custom events:
-
-    <a href="/posts/new" data-bind="mouseover:posts/new">Click me!</a>
-
-Finally, in shorthand only, you can bind multiple events to a single element:
-
-    <a href="/posts/new" data-bind="mouseover:posts/preview; click: posts/new">Hover first, then Click me!</a>
+    <a href="/posts/new" data-bind="mouseover:posts#preview; click: posts/new">Hover first, then Click me!</a>
     
-Isn't that cool?
+It's called "obtrusive UJS" ... explicit, yet everything has its own place.
     
 Putting it all together
 -----------------------
 
-TODO: The demo app isn't working right now. There should be a generator to generate a new demo app after each release.
-
-There's a small demo app included in this package, a simple app for adding personal reviews. It's a simple Sinatra app, so you can run it with:
-
-    ruby app.rb
-
-And then visit it in a browser at `localhost:4567`
-
-It should all "just work" ... in a browser that supports HTML5 local storage.
+Imagine a simple app for posting reviews. It will comprise a "Review" model, "ReviewsController" and associated views.
 
 `models/review.js` looks like this:
 
@@ -309,9 +287,9 @@ It should all "just work" ... in a browser that supports HTML5 local storage.
       review.validates_presence_of('content');
     });
 
-This defines the Review model, allowing us to initialize and save Review objects.
+This defines the Review model, allowing us to initialize and save Review objects, while ensuring `title` and `content` are included.
 
-The `create` action in `controllers/reviews_controller.js` looks like this:
+The `create` action in `controllers/reviews_controller.js` looks like this (using jQuery):
 
     ...
     create: function(){
@@ -331,7 +309,7 @@ The `create` action in `controllers/reviews_controller.js` looks like this:
 
 The form that hooks up to this action is like this:
 
-    <form data-controller="reviews" data-action="create">
+    <form data-bind="reviews#create">
       <label for="review-title">Title</label><br />
       <input type="text" name="title" value="" data-attribute="title"><br />
       <label for="review-content">Review</label><br />
@@ -339,15 +317,11 @@ The form that hooks up to this action is like this:
       <input type="submit" name="commit" value="Save">
     </form>
 
-The main things to note here are the way that the form binds automatically to the create action (using jQuery). Also, field elements have the "data-attribute" attributes ... the o\_O.params() function reads from these, returning a JSON object that can be passed to Review.initialize(...).
+The main things to note here are the way that the form binds automatically to the create action (using jQuery event delegation). Also, field elements have the "data-attribute" attributes ... the o\_O.params() function reads from these, returning a JSON object that can be passed to Review.initialize(...).
 
 Notice also `o_O.alert_errors(...)` which displays an alert of all the errors on an invalid review.
 
 Finally, the o\_O.render function takes a template, which is a Mustache.js template stored in `views/`, the review object and a set of options.
-
-This is all very early stuff, but please feel free to play and feedback.
-
-That's all for now!
     
 
 Running the tests
@@ -355,6 +329,8 @@ Running the tests
 
 eyeballs.js uses QUnit for in-browser testing. Just load the files in the test directory in any browser to run them.
 
+For the REST tests, you can use the included Sinatra app, `app.rb`. The tests expect it to be in a local virtual domain `http://eyeballs`
+
 About me
 --------
 

data/Rakefile

@@ -27,7 +27,7 @@ begin
   require 'jeweler'
   Jeweler::Tasks.new do |s|
     s.name = "eyeballs"
-    s.version = "0.4.2"
+    s.version = "0.5.0"
     s.author = "Paul Campbell"
     s.email = "paul@rslw.com"
     s.homepage = "http://www.github.com/paulca/eyeballs.js"

data/TODO

@@ -0,0 +1,2 @@
+- alert_errors
+- Rails helper to automatically include "data-attributes"

data/app.rb

@@ -11,6 +11,44 @@ post '/reviews' do
   '{"id": "1"}'
 end
 
+post '/alternate_reviews' do
+  '{"id": "2"}'
+end
+
+post '/string_back' do
+  'some string'
+end
+
+post '/test_id' do
+  if params[:alternate_object]
+    if params[:id]
+      'fail'
+    end
+  else
+    'ok'
+  end
+end
+
+post '/rails_reviews' do
+  if params[:rails_review]
+    'ok'
+  else
+    'fail'
+  end
+end
+
+post '/alternate_rails_reviews' do
+  if params[:alternate_object]
+    'ok'
+  else
+    'fail'
+  end
+end
+
+post '/auth_token' do
+  params[:authenticity_token]
+end
+
 get '/reviews/:id' do
   '{"id": "1", "title":"More Magic!"}'
 end
@@ -20,9 +58,9 @@ get '/my/reviews/:id' do
 end
 
 put '/reviews/:id' do
-  '{"id": "1", "title":"Tennessee"}'
+  '{"id": "1", "title":"Updated"}'
 end
 
 delete '/reviews/:id' do
-  '{"id": "1", "title":"Tennessee"}'
+  'Deleted OK'
 end

data/eyeballs.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{eyeballs}
-  s.version = "0.4.2"
+  s.version = "0.5.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Paul Campbell"]
-  s.date = %q{2010-07-07}
+  s.date = %q{2010-07-17}
   s.default_executable = %q{eyeballs}
   s.email = %q{paul@rslw.com}
   s.executables = ["eyeballs"]
@@ -22,12 +22,12 @@ Gem::Specification.new do |s|
      "Gemfile.lock",
      "README.md",
      "Rakefile",
+     "TODO",
      "app.rb",
      "bin/eyeballs",
      "config.ru",
      "dist/jquery/jquery-1.4.2.min.js",
      "dist/jquery/jquery.ba-hashchange.js",
-     "dist/jquery/jquery.livequery.js",
      "dist/mustache/mustache.0.2.3.js",
      "eyeballs.gemspec",
      "lib/eyeballs.rb",

data/lib/eyeballs/app_generator.rb

@@ -18,7 +18,6 @@ module Eyeballs
     def build_the_app
       directory "templates/app_root", new_app_path
       copy_file 'dist/jquery/jquery-1.4.2.min.js', "#{new_app_path}/vendor/jquery/jquery-1.4.2.min.js"
-      copy_file 'dist/jquery/jquery.livequery.js', "#{new_app_path}/vendor/jquery/jquery.livequery.js"
       copy_file 'dist/mustache/mustache.0.2.3.js', "#{new_app_path}/vendor/mustache/mustache.0.2.3.js"
       directory "src", "#{new_app_path}/vendor/eyeballs/"
     end

data/spec/app_generator_spec.rb

@@ -43,7 +43,7 @@ describe Eyeballs::AppGenerator do
     
     it "should create the app files" do
       jquery_file.should exist
-      livequery_file.should exist
+      livequery_file.should_not exist
       mustache_file.should exist
       index_file.should exist
       initializer_file.should exist

data/src/drivers/jquery/adapters/o_O.couchdb.js

@@ -4,8 +4,8 @@ o_O.couchdb = {
     
     var database = o_O.model.adapter.settings.database;
     
-    var ddoc_id = ['_design', model.table_name].join('/')
-    var view_name = model.table_name + '/all'
+    var ddoc_id = ['_design', model.table_name].join('/');
+    var view_name = model.table_name + '/all';
     var get_all_documents = function(result){
       var documents = result.rows;
       var all_documents = [];

data/src/drivers/jquery/adapters/o_O.rest.js

@@ -1,5 +1,19 @@
 // REST & Rails, woop!
 o_O.rest = {
+  figure_url: function(original_callback, object){
+    if(typeof original_callback.url === 'string')
+    {
+      return original_callback.url;
+    }
+    else if(typeof window[object.model_name]['url'] === 'string')
+    {
+      return window[object.model_name]['url'];
+    }
+    else
+    {
+      return '/' + object.table_name;
+    }
+  },
   all: function(model, callback){
     $.get('/' + model.table_name, function(response){
       var documents = JSON.parse(response);
@@ -9,47 +23,76 @@ o_O.rest = {
       }
     })
   },
-  destroy: function(object, callback){
+  destroy: function(object, callback, original_callback){
     object.destroyed = true;
     $.ajax({
       type: 'DELETE',
-      url: '/' + object.table_name + '/' + object.id,
-      success: function(){
+      url: this.figure_url(original_callback, object) + '/' + object.id,
+      success: function(response){
         if(typeof callback === 'function')
         {
-          callback(object);
+          callback(object, response);
         }
       }
     })
   },
-  save: function(object, callback)
+  save: function(object, callback, original_callback)
   {
-    var object_to_save = {}
+    var object_to_save = {};
+    var url;
     for(var i = 0; i < object.attributes.length; i++)
     {
       object_to_save[object.attributes[i]] = object[object.attributes[i]];
     }
     var respond = function(response){
-      var saved_object = JSON.parse(response);
-      for(var attribute in saved_object)
-      {
-        object_to_save[attribute] = saved_object[attribute];
+      try{
+        var saved_object = JSON.parse(response);
+        for(var attribute in saved_object)
+        {
+          object_to_save[attribute] = saved_object[attribute];
+        }
+        object_to_save.new_record = false;
+      }
+      catch(e){
+        // keep the ID persistent
+        object_to_save.id = object.id;
       }
-      object_to_save.new_record = false;
       if(typeof callback === 'function')
       {
-        callback(object_to_save);
+        callback(object_to_save, response);
+      }
+    }
+    url = this.figure_url(original_callback, object);
+    
+    if(window[object.model_name]['include_json_root'] === true)
+    {
+      var object_name;
+      new_object_to_save = {};
+      if(typeof window[object.model_name]['json_root_name'] === 'string')
+      {
+       object_name = window[object.model_name]['json_root_name'];
+      }
+      else
+      {
+        object_name = object.model_name.underscore();
       }
+      new_object_to_save[object_name] = object_to_save;
+      object_to_save = new_object_to_save;
+    }
+    if(typeof o_O.config.authenticity_token === 'string')
+    {
+      object_to_save['authenticity_token'] = o_O.config.authenticity_token;
     }
     if(object.new_record)
     {
-      $.post('/' + object.table_name, object_to_save, respond);
+      $.post(url, object_to_save, respond);
     }
     else
     {
       $.ajax({
         type: 'PUT',
-        url: '/' + object.table_name + '/' + object.id,
+        data: object_to_save,
+        url: url + '/' + object.id,
         success: respond
       })
     }
@@ -71,3 +114,5 @@ o_O.rest = {
     })
   }
 }
+
+o_O.config.rest = {}

data/src/drivers/jquery/modules/o_O.controller.js

@@ -1,38 +1,19 @@
 o_O.controller = {
   initialize: function(controller_name, controller){
-    var action_event = function(object){
-      if(object.attr('data-event'))
-      {
-        return object.attr('data-event');
-      }
-      return (object.is('form')) ? 'submit' : 'click';
-    }
 
     var controller_name = controller_name.replace('Controller', '').toLowerCase();
     var controller = controller;
 
     $(function(){
-      
-      for(var action in controller)
-      {        
-        var selector = '[data-controller=' + controller_name + '][data-action=' + action + ']';
-        $(selector).livequery(function(){
-          var element = $(this);
-          $(this).bind(action_event(element), controller[element.attr('data-action')]);
-          if(!($(this).attr('data-default')))
-          {
-            $(this).bind(action_event(element), function(){ return false; });
-          }
-        })
-      }
-      $('[data-bind]').livequery(function(){
-        var binders = $(this).attr('data-bind').match(/[\+]?(\s+)?[^ :]?[: ]?[^ #]+[ #]+[^ ;]+[ ;]?/g)
+      var events = 'click submit hover mouseover blur focus change dblclick keydown keypress keyup scroll'
+      $('body').delegate('[data-bind]', events, function(event){
+        var binders = $(this).attr('data-bind').match(/[\+]?(\s+)?[^ :]?[: ]?[^ #]+[ #]+[^ ;]+[ ;]?/g);
         if(binders != null && binders.length > 0)
         {
           for(i = 0; i < binders.length; i++)
           {
             var rule = binders[i];
-            var parts = rule.match(/([\+])?(\s+)?(([^ :]+)([: ]+))?([^ #]+)[ #]+([^ ;]+)[ ;]?/)
+            var parts = rule.match(/([\+])?(\s+)?(([^ :]+)([: ]+))?([^ #]+)[ #]+([^ ;]+)[ ;]?/);
             var default_bit = parts[1];
             var this_action_event = parts[4];
             if(this_action_event === undefined)
@@ -41,17 +22,17 @@ o_O.controller = {
             }
             var this_controller_name = parts[6];
             var this_action = parts[7];
-            if(this_controller_name == controller_name)
+            if(this_controller_name == controller_name && this_action_event === event.type)
             {
-              $(this).bind(this_action_event,controller[this_action]);
+              controller[this_action].apply(this);
               if(default_bit != '+')
               {
-                $(this).bind(this_action_event, function(){ return false; });
+                return false;
               }
             }
           }
         }
-      });
+      })
     });
     return controller;
   }