Add Backbone style events without using the whole framework. This will provide a bare bones micro front-end framework for developing multi-page Rails applications with Javascript or CoffeeScript. This will increase the speed of all event based development, creation of dynamic content, and will add clear organization to Javascript/Coffeescript files.
Run the following command in terminal rails generate rails_events
rails_events gives the ability to bind and trigger events in a backbone.js fashion. The javascript files for the front-end use an events hash to keep track of how callbacks are fired. The following demonstrates how to bind events to selectors.
CoffeeScript:
class ProjectName.Views.modelsAction extends ProjectName.View
events:
'event selector' : 'callback'
callback: (e) ->
alert("Callback Fired!");JavaScript:
ProjectName.Views.modelsAction = ProjectName.View.extend({
events: {
'event selector': 'callback'
},
callback: function(e) {
return alert("Callback Fired!");
}
});The proper naming conventions for the JavaScript/CoffeeScript files are the controller name camel cased with the controller action
i.e. modelsAction.js.
There is a Company model and controller with an index action.
app/controllers/companies_controller.rb
class CompaniesController < ApplicationController
def index
end
endapp/views/companies/index.html
<p class="company">
Hello Company
</p>app/assets/javascripts/views/companiesIndex.js.coffee
class ProjectName.Views.CompaniesIndex extends ProjectName.View
events:
'click .company' : 'sayHello'
sayHello: (e) ->
alert("Hello!")Alternatively, if you prefer to use Javascript, the backbone extend helper is included in ProjectName.View to make inheritance convenient:
app/assets/javascripts/views/companiesIndex.js
ProjectName.Views.CompaniesIndex = ProjectName.View.extend({
events: {
'click .company': 'sayHello'
},
sayHello: function(e) {
return alert("Hello!");
}
});When the text "Hello Company" is clicked, an alert with the text "Hello!" will pop up.
There was likely an error in the following:
This gem creates the following files:
app/assets/javascripts/views/_project_name_view.jsapp/assets/javascripts/project_name.js
And injects the following dependencies in the application.js file in the following order:
- Underscore
- ProjectName
- ./views
Lastly it modifies the <body> tag in application.html.erb to be:
<body data-view-render= <%= "#{@js_view.present? ? @js_view : controller_name.camelize+action_name.camelize}" %>>
The gems:
- rails
- underscore-rails
- underscore-string-rails
- jquery-rails