You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+46-43
Original file line number
Diff line number
Diff line change
@@ -24,61 +24,35 @@ After the generator finishes, you will be prompted to add helper call to your ap
24
24
25
25
## Usage
26
26
27
-
### Global Functions
28
-
29
-
Any functions that need to be accessible in the global scope should be defined in ```global.js.coffee``` using the ```App``` namespace. Below is an example of one of our favorite functions that we use to submit a form using AJAX as a JSON request.
Now you can access this function from anywhere in the application by just calling ```App.remoteSubmission($('#myForm'), alert('Hello'))```
48
-
27
+
### Page (Action) Specific JavaScript
49
28
50
-
### Page Specific JavaScript
51
-
52
-
This is where things get even easier, your JavaScript class is named after your Controller and there is a method for each Controller action. Whenever you generate a Controller, the CoffeeScript file that is generated will define the new JavaScript class and the basic REST actions. This means on ```Users#show``` we can submit that 'follow' request in the background like so:
29
+
Your JavaScript class is named after your Controller and there is a method for each Controller action. Whenever you generate a Controller, the CoffeeScript file that is generated will define the new JavaScript class and the basic REST actions. The example below would print 'users#show' in the console for the ```Users#show``` action.
53
30
54
31
```
55
32
# app/assets/javascripts/users.js.coffee
56
33
57
34
window.App ||= {}
58
35
class App.Users extends App.Base
59
36
60
-
show: ->
61
-
App.remoteSubmission($('#follow-user-form'), alert('You are now following them!'))
37
+
show: =>
38
+
console.log 'users#show'
62
39
```
63
40
64
41
42
+
65
43
### Controller Specific JavaScript
66
44
67
-
Executing some JavaScript to run on all controller actions is just a matter of adding it to the class constructor. In the below example we will change the background color of the page for all actions in```UsersController```.
45
+
Executing some JavaScript to run on all controller actions is just a matter of adding it to the ```all``` function. This is run before the action specific method. The example below would print 'users' for each```Users``` controller action.
68
46
69
47
```
70
48
# app/assets/javascripts/users.js.coffee
71
49
window.App ||= {}
72
-
class App.Example extends App.Base
50
+
class App.Users extends App.Base
73
51
74
-
constructor: ->
75
-
super
76
-
$('body').css('background-color', 'yellow')
77
-
return this
52
+
all: =>
53
+
console.log 'users'
78
54
```
79
55
80
-
Note the call to ```super``` and the ```return this```, it is very important to keep these. If you wanted your Controller specific JavaScript to run before Application wide JavaScript, then you would call ```super``` just before ```return this```. Returning ```this``` allows the Application layout JavaScript to call the action specific functions.
81
-
82
56
83
57
### Application Wide JavaScript
84
58
@@ -105,6 +79,29 @@ class App.Base
105
79
In this example we extracted the rollover action into a new function. Doing so will make the class cleaner and easier to maintain as the application grows. Once again note the ```return this``` in the constructor.
106
80
107
81
82
+
83
+
### Global Functions
84
+
85
+
Any functions that need to be accessible in the global scope should be defined in ```global.js.coffee``` using the ```App``` namespace. Below is an example of one of our favorite functions that we use to submit a form using AJAX as a JSON request.
86
+
87
+
```
88
+
# app/assets/javascripts/global.js.coffee
89
+
window.App ||= {}
90
+
91
+
App.remoteSubmission = ($form) ->
92
+
$.ajax
93
+
url: $form.attr('action')
94
+
type: $form.attr('method')
95
+
data: $form.serialize()
96
+
dataType: 'json'
97
+
98
+
return
99
+
```
100
+
101
+
Now you can access this function from anywhere in the application by just calling ```App.remoteSubmission($('#myForm'))```
102
+
103
+
104
+
108
105
### Utilities
109
106
110
107
A ```Utility``` is a class that will be used to create similar functionality in many areas of the application. A good example of this is a Modal, which could appear multiple times on the same page. So, let's encapsulate this functionality in a highly reusable class.
@@ -168,6 +165,7 @@ class App.Users extends App.Base
168
165
```
169
166
170
167
168
+
171
169
### Elements
172
170
173
171
An ```Element``` is a class that describes the functionality of a one off element in the application. A Main Menu is a good example of this since there is usually only a single Main Menu.
@@ -202,6 +200,7 @@ class App.Base
202
200
```
203
201
204
202
203
+
205
204
#### Element Inheritance
206
205
207
206
Inheritance is another key tool for reusability. Let's say our ```Element.MainMenu``` opens and closes in the same way as the ```Utility.Modal```. Well then MainMenu should just extend Modal, this can be accomplished from the generator:
@@ -223,6 +222,7 @@ class Element.MainMenu extends Utility.Modal
223
222
Inheritance from the generator can only come from a Utility class. Any class you wish to extend should be created as a Utility. The installer adds the line ```//= require_tree ./utilities``` before loading tree to handle this. If you have a utility that extends a utility, then make sure the extended utility is loaded first by explicitly requiring it before ```//= require_tree ./utilities```.
224
223
225
224
225
+
226
226
### Custom Controllers
227
227
228
228
When a new controller is generated, the JavaScript asset file will be generated with RailsScript. However, if you need to manually generate a RailsScript controller you can use:
@@ -237,28 +237,28 @@ Since the above example includes a namespace, it would generate:
237
237
window.App ||= {}
238
238
class App.SomeNewController extends App.Base
239
239
240
-
constructor: ->
241
-
super
242
-
return this
240
+
all: =>
241
+
return
243
242
244
243
245
-
index: ->
244
+
index: =>
246
245
return
247
246
248
247
249
-
show: ->
248
+
show: =>
250
249
return
251
250
252
251
253
-
new: ->
252
+
new: =>
254
253
return
255
254
256
255
257
-
edit: ->
256
+
edit: =>
258
257
return
259
258
```
260
259
261
-
None of the pre-defined functions are necessary, you can remove the ones you don't want.
260
+
None of the pre-defined functions are necessary, you can remove the ones you don't need.
261
+
262
262
263
263
264
264
### Generic Classes
@@ -280,6 +280,8 @@ class App.MyClassName
280
280
281
281
```
282
282
283
+
284
+
283
285
### Passing Rails Variables
284
286
285
287
To pass data from Rails to JavaScript, just call ```to_javascript``` along with a hash of your data. This is then converted to a JSON object with ```to_javascript.to_json``` and can be accessed with ```Utility.RailsVars```. The ```to_javascript``` helper may be called from multiple points in the application, all data is merged together.
@@ -315,6 +317,7 @@ class App.Users extends App.Base
315
317
```
316
318
317
319
320
+
318
321
### Events
319
322
320
323
Since Turbolinks doesn't refresh the page and only replaces the body, event listeners defined on ```window``` and ```document``` carry between page loads. To avoid these event listeners stacking, RailsScript will destroy all event listeners on ```window``` and ```document``` that have a blank namespace, i.e. ```$(window).on 'scroll', myHandler```. If you need an event handler to persist between page changes, then define a namespace, i.e. ```$(window).on 'scroll.namespace', myHandler```.
0 commit comments