support pure javascript

backbone-rails.gemspec

@@ -12,11 +12,11 @@ Gem::Specification.new do |s|
   s.files = Dir["lib/**/*"] + Dir["vendor/**/*"] + ["MIT-LICENSE", "Rakefile", "README.md"]
 
   s.add_dependency('railties', '>= 3.1.0')
-  s.add_dependency('coffee-script', '~> 2.2.0')
   s.add_dependency('jquery-rails', '~> 2.1.3')
   s.add_dependency('ejs', '~> 1.1.1')
 
   s.add_development_dependency('rails', '~> 3.2.0')
+  s.add_development_dependency('coffee-script', '~> 2.2.0')
   s.add_development_dependency('sqlite3')
   s.add_development_dependency('sass')
   s.add_development_dependency('uglifier')

lib/backbone-rails.rb

@@ -1,6 +1,42 @@
 require 'rails'
 
 module BackboneRails
+  class << self
+    # Returns true if `BackboneRails` is set to produce coffeescript,
+    # false if it is set to produce javascript.
+    def coffeescript?
+      if @coffeescript.nil?
+        detect_script!
+      else
+        @coffeescript
+      end
+    end
+
+    # Forces generators to produce coffeescript instead of javascript.
+    def coffeescript!
+      @coffeescript = true
+    end
+
+    # Forces generators to produce javascript instead of coffeescript.
+    def javascript!
+      @coffeescript = false
+    end
+
+    # Sets `BackboneRails` to produce CoffeeScript if the `coffee-script`
+    # gem is available, JavaScript otherwise.
+    def detect_script!
+      @coffeescript = coffeescript_available?
+    end
+
+    # Returns true if the `coffee-script` gem is available.
+    def coffeescript_available?
+      defined?(CoffeeScript) || require('coffee-script')
+      true
+    rescue LoadError
+      false
+    end
+  end
+
   class Engine < Rails::Engine
   end
 end

lib/generators/backbone/install/install_generator.rb

@@ -26,7 +26,7 @@ def create_dir_layout
       end
 
       def create_app_file
-        template "app.coffee", "app/assets/javascripts/backbone/#{application_name.underscore}.js.coffee"
+        template "app.#{script_extension}", "app/assets/javascripts/backbone/#{application_name.underscore}.#{script_extension}"
       end
 
     end

lib/generators/backbone/install/templates/app.js

@@ -0,0 +1,12 @@
+//= require_self
+//= require_tree ./templates
+//= require_tree ./models
+//= require_tree ./views
+//= require_tree ./routers
+
+window.<%= js_app_name %> = {
+  Models: {},
+  Collections: {},
+  Routers: {},
+  Views: {}
+};

lib/generators/backbone/model/model_generator.rb

@@ -11,7 +11,7 @@ class ModelGenerator < Rails::Generators::NamedBase
       argument :attributes, :type => :array, :default => [], :banner => "field:type field:type"
 
       def create_backbone_model
-        template "model.coffee", "#{backbone_path}/models/#{file_name}.js.coffee"
+        template "model.#{script_extension}", "#{backbone_path}/models/#{file_name}.#{script_extension}"
       end
 
     end

lib/generators/backbone/model/templates/model.js

@@ -0,0 +1,12 @@
+<%= model_namespace %> = Backbone.Model.extend({
+  paramRoot: '<%= singular_table_name %>',
+
+  defaults: {
+    <%= attributes.collect { |a| "#{a.name}: null" }.join(",\n    ") %>
+  }
+});
+
+<%= collection_namespace %>Collection = Backbone.Collection.extend({
+  model: <%= model_namespace %>,
+  url: '<%= route_url %>'
+});

lib/generators/backbone/resource_helpers.rb

@@ -1,6 +1,22 @@
 module Backbone
   module Generators
     module ResourceHelpers
+      def self.included base
+        base.module_eval do
+          class_option :javascript, :aliases => '-J',
+                                    :type => :boolean,
+                                    :default => false,
+                                    :desc => "Generate JavaScript instead of CoffeeScript"
+        end
+      end
+
+      def script_extension
+        if options['javascript'] || !BackboneRails.coffeescript?
+          "js"
+        else
+          "js.coffee"
+        end
+      end
 
       def backbone_path
         "app/assets/javascripts/backbone"

lib/generators/backbone/router/router_generator.rb

@@ -25,16 +25,16 @@ def validate_no_reserved_words
       end
 
       def create_router_files 
-        template 'router.coffee', File.join(backbone_path, "routers", class_path, "#{file_name}_router.js.coffee")
+        template "router.#{script_extension}", File.join(backbone_path, "routers", class_path, "#{file_name}_router.#{script_extension}")
       end
 
       def create_view_files
          actions.each do |action|
            @action = action
-           @view_path = File.join(backbone_path, "views", plural_name, "#{action}_view.js.coffee")
+           @view_path = File.join(backbone_path, "views", plural_name, "#{action}_view.#{script_extension}")
            @jst_path = File.join(backbone_path,"templates", plural_name, "#{action}.jst.ejs")
 
-           template "view.coffee", @view_path
+           template "view.#{script_extension}", @view_path
            template "template.jst", @jst_path
          end
       end

lib/generators/backbone/router/templates/router.js

@@ -0,0 +1,17 @@
+<%= router_namespace %>Router = Backbone.Router.extend({
+  initialize: function(options) {
+
+  },
+
+  routes: {
+    <%= actions.collect { |a| "\"#{a}\": \"#{a}\"" }.join(",\n    ") %>
+  },
+
+<% actions.each do |action| -%>
+  <%= action %>: function() {
+    this.view = new <%= "#{view_namespace}.#{action.camelize}View()" %>;
+    $("#<%= plural_name %>").html(this.view.render().el);
+  },
+
+<% end -%>
+});

lib/generators/backbone/router/templates/view.js

@@ -0,0 +1,10 @@
+<%= view_namespace %> || (<%= view_namespace %> = {});
+
+<%= view_namespace %>.<%= @action.camelize %>View = Backbone.View.extend({
+  template: JST["<%= jst @action %>"],
+
+  render: function() {
+    this.$el.html(this.template());
+    return this;
+  }
+});

lib/generators/backbone/scaffold/scaffold_generator.rb

@@ -8,16 +8,16 @@ class ScaffoldGenerator < ModelGenerator
       desc "This generator creates the client side crud scaffolding"
 
       def create_router_files 
-        template 'router.coffee', File.join(backbone_path, "routers", class_path, "#{plural_name}_router.js.coffee")
+        template "router.#{script_extension}", File.join(backbone_path, "routers", class_path, "#{plural_name}_router.#{script_extension}")
       end
 
       def create_view_files
         available_views.each do |view|
-          template "views/#{view}_view.coffee", File.join(backbone_path, "views", plural_name, "#{view}_view.js.coffee")
+          template "views/#{view}_view.#{script_extension}", File.join(backbone_path, "views", plural_name, "#{view}_view.#{script_extension}")
           template "templates/#{view}.jst", File.join(backbone_path, "templates", plural_name, "#{view}.jst.ejs")       
         end
 
-        template "views/model_view.coffee", File.join(backbone_path, "views", plural_name, "#{singular_name}_view.js.coffee")
+        template "views/model_view.#{script_extension}", File.join(backbone_path, "views", plural_name, "#{singular_name}_view.#{script_extension}")
         template "templates/model.jst", File.join(backbone_path, "templates", plural_name, "#{singular_name}.jst.ejs") 
       end
 

lib/generators/backbone/scaffold/templates/model.js

@@ -0,0 +1,12 @@
+<%= model_namespace %> = Backbone.Model.extend({
+  paramRoot: '<%= singular_table_name %>',
+
+  defaults: {
+    <%= attributes.collect { |a| "#{a.name}: null" }.join(",\n    ") %>
+  }
+});
+
+<%= collection_namespace %>Collection = Backbone.Collection.extend({
+  model: <%= model_namespace %>,
+  url: '<%= route_url %>'
+});

lib/generators/backbone/scaffold/templates/router.js

@@ -0,0 +1,38 @@
+<%= router_namespace %>Router = Backbone.Router.extend({
+  initialize: function(options) {
+    this.<%= plural_model_name %> = new <%= collection_namespace %>Collection();
+    this.<%= plural_model_name %>.reset(options.<%= plural_model_name %>);
+  },
+
+  routes: {
+    "new"      : "new<%= class_name %>",
+    "index"    : "index",
+    ":id/edit" : "edit",
+    ":id"      : "show",
+    ".*"       : "index"
+  },
+
+  new<%= class_name %>: function() {
+    this.view = new <%= view_namespace %>.NewView({collection: this.<%= plural_name %>});
+    $("#<%= plural_name %>").html(this.view.render().el);
+  },
+
+  index: function() {
+    this.view = new <%= view_namespace %>.IndexView({<%= plural_name %>: this.<%= plural_name %>});
+    $("#<%= plural_name %>").html(this.view.render().el);
+  },
+
+  show: function(id) {
+    var <%= singular_name %> = this.<%= plural_name %>.get(id);
+
+    this.view = new <%= view_namespace %>.ShowView({model: <%= singular_name %>});
+    $("#<%= plural_name %>").html(this.view.render().el);
+  },
+
+  edit: function(id) {
+    var <%= singular_name %> = this.<%= plural_name %>.get(id);
+
+    this.view = new <%= view_namespace %>.EditView({model: <%= singular_name %>});
+    $("#<%= plural_name %>").html(this.view.render().el);
+  }
+});

lib/generators/backbone/scaffold/templates/views/edit_view.js

@@ -0,0 +1,30 @@
+<%= view_namespace %> || (<%= view_namespace %> = {});
+
+<%= view_namespace %>.EditView = Backbone.View.extend({
+  template: JST["<%= jst 'edit' %>"],
+
+  events: {
+    "submit #edit-<%= singular_name %>": "update"
+  },
+
+  update: function(e) {
+    var self = this;
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.model.save(null, {
+      success: function(<%= singular_name %>) {
+        self.model = <%= singular_name %>;
+        window.location.hash = "/" + self.model.id;
+      }
+    });
+  },
+
+  render: function() {
+    this.$el.html(this.template(this.model.toJSON() ));
+
+    this.$("form").backboneLink(this.model);
+
+    return this;
+  }
+});

lib/generators/backbone/scaffold/templates/views/index_view.js

@@ -0,0 +1,28 @@
+<%= view_namespace %> || (<%= view_namespace %> = {});
+
+<%= view_namespace %>.IndexView = Backbone.View.extend({
+  template: JST["<%= jst 'index' %>"],
+
+  initialize: function() {
+    this.addAll = _.bind(this.addAll, this);
+    this.addOne = _.bind(this.addOne, this);
+    this.render = _.bind(this.render, this);
+    this.options.<%= plural_model_name %>.bind('reset', this.addAll);
+  },
+
+  addAll: function() {
+    this.options.<%= plural_model_name %>.each(this.addOne);
+  },
+
+  addOne: function(<%= singular_model_name %>) {
+    view = new <%= view_namespace %>.<%= singular_name.camelize %>View({model : <%= singular_model_name %>});
+    this.$("tbody").append(view.render().el);
+  },
+
+  render: function() {
+    this.$el.html(this.template({<%= plural_model_name %>: this.options.<%= plural_model_name %>.toJSON() }));
+    this.addAll();
+
+    return this;
+  }
+});

lib/generators/backbone/scaffold/templates/views/model_view.js

@@ -0,0 +1,23 @@
+<%= view_namespace %> || (<%= view_namespace %> = {});
+
+<%= view_namespace %>.<%= singular_name.camelize %>View = Backbone.View.extend({
+  template: JST["<%= jst singular_name %>"],
+
+  events: {
+    "click .destroy" : "destroy"
+  },
+
+  tagName: "tr",
+
+  destroy: function() {
+    this.model.destroy();
+    this.remove();
+
+    return false;
+  },
+
+  render: function() {
+    this.$el.html(this.template(this.model.toJSON() ));
+    return this;
+  }
+});

lib/generators/backbone/scaffold/templates/views/new_view.js

@@ -0,0 +1,45 @@
+<%= view_namespace %> || (<%= view_namespace %> = {});
+
+<%= view_namespace %>.NewView = Backbone.View.extend({
+  template: JST["<%= jst 'new' %>"],
+
+  events: {
+    "submit #new-<%= singular_name %>": "save"
+  },
+
+  initialize: function() {
+    var self = this;
+    this.model = new this.collection.model();
+
+    this.model.bind("change:errors", function() {
+      self.render();
+    });
+  },
+
+  save: function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.model.unset("errors");
+
+    var self = this;
+    this.collection.create(this.model.toJSON(), {
+      success: function(<%= singular_name %>) {
+        self.model = <%= singular_name %>;
+        window.location.hash = "/" + self.model.id;
+      },
+
+      error: function(<%= singular_name %>, jqXHR) {
+        self.model.set({errors: $.parseJSON(jqXHR.responseText)});
+      }
+    });
+  },
+
+  render: function() {
+    this.$el.html(this.template(this.model.toJSON() ));
+
+    this.$("form").backboneLink(this.model);
+
+    return this;
+  }
+});

lib/generators/backbone/scaffold/templates/views/show_view.js

@@ -0,0 +1,10 @@
+<%= view_namespace %> || (<%= view_namespace %> = {});
+
+<%= view_namespace %>.ShowView = Backbone.View.extend({
+  template: JST["<%= jst 'show' %>"],
+
+  render: function() {
+    this.$el.html(this.template(this.model.toJSON() ));
+    return this;
+  }
+});

test/dummy/app/assets/javascripts/albums.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.