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
Improve grammar, style, and consistency in the Behavior docs.
This commit makes relatively minor grammatical and stylitic changes
to improve the clarity of the `Behavior` docs. In addition, for the
sake of consistency, the singular forms of both `Behavior` and
`View` have been wrapped in backticks (`<code>` tags in the compiled
HTML) to match what seemed to be the preference based on the rest of
the document. Further, the established practice seemed to have been
to capitalize both "Behaviors" and "Views", but not to wrap them
in `<code>` tags, so this fixes a few stragglers in that regard.
Copy file name to clipboardExpand all lines: docs/marionette.behavior.md
+38-44
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@
3
3
# Marionette.Behavior
4
4
5
5
6
-
A `Behavior` is an isolated set of DOM / user interactions that can be mixed into any `View` or another `Behavior`. Behaviors allow you to blackbox Viewspecific interactions into portable logical chunks, keeping your Views simple and your code DRY.
6
+
A `Behavior` is an isolated set of DOM / user interactions that can be mixed into any `View` or another `Behavior`. Behaviors allow you to blackbox `View`-specific interactions into portable logical chunks, keeping your Views simple and your code DRY.
7
7
8
8
## Documentation Index
9
9
@@ -22,11 +22,11 @@ A `Behavior` is an isolated set of DOM / user interactions that can be mixed in
22
22
23
23
## The Motivation
24
24
25
-
As you build more and more complex Views, you will find that your View becomes less about displaying model data, and more about interactions.
25
+
As you build more and more complex Views, you will find that your `View` becomes less about displaying model data, and more about interactions.
26
26
27
27
These interactions tend to be chunks of logic that you want to use in multiple views.
28
28
29
-
## Using
29
+
## Usage
30
30
31
31
Here is an example of a simple `ItemView`. Let's take a stab at simplifying it, and abstracting Behaviors from it.
32
32
@@ -41,23 +41,24 @@ var MyView = Marionette.ItemView.extend({
41
41
},
42
42
43
43
warnBeforeDestroy:function() {
44
-
alert("you are destroying all your data is now gone!");
44
+
alert("You are about to destroy all your data!");
45
45
this.destroy();
46
46
},
47
47
48
48
onShow:function() {
49
49
this.ui.destroy.tooltip({
50
-
text:"what a nice mouse you have"
50
+
text:"What a nice mouse you have."
51
51
});
52
52
}
53
53
});
54
54
```
55
55
56
-
Interaction points, such as tooltips and warning messages, are generic concepts. There is no need to recode them within your Views. They are prime for abstraction into a higher level non-coupled concept, which is exactly what Behaviors provide you with.
56
+
Interaction points, such as tooltips and warning messages, are generic concepts. There is no need to recode them within your Views. They are prime candidates for abstraction into a higher level, non-coupled concept, which is exactly what Behaviors provide you with.
57
57
58
-
Here is the syntax for declaring which behaviors get used within a View.
59
-
The keys in the hash are passed to `getBehaviorClass` which looks up the correct `Behavior` class.
60
-
The options for each Behavior are also passed through to the Behavior during initialization. The options are then stored within each Behavior under `options`.
58
+
Here is the syntax for declaring which behaviors get used within a View:
59
+
* The keys in the hash are passed to `getBehaviorClass`, which looks up the correct `Behavior` class.
60
+
* The options for each `Behavior` are also passed through to the `Behavior` during initialization.
61
+
* The options are then stored within each `Behavior` under `options`.
61
62
62
63
```js
63
64
var MyView =Marionette.ItemView.extend({
@@ -76,26 +77,26 @@ var MyView = Marionette.ItemView.extend({
76
77
});
77
78
```
78
79
79
-
Now let's create the `DestroyWarn` Behavior.
80
+
Now let's create the `DestroyWarn``Behavior`.
80
81
81
82
```js
82
83
var DestroyWarn =Marionette.Behavior.extend({
83
-
//you can set default options
84
-
// just like you can in your Backbone Models
85
-
//they will be overriden if you pass in an option with the same key
84
+
//You can set default options
85
+
// just like you can in your Backbone Models.
86
+
//They will be overridden if you pass in an option with the same key.
86
87
defaults: {
87
-
"message":"you are destroying!"
88
+
"message":"You are destroying!"
88
89
},
89
90
90
-
//behaviors have events that are bound to the views DOM
91
+
//Behaviors have events that are bound to the views DOM.
91
92
events: {
92
93
"click @ui.destroy":"warnBeforeDestroy"
93
94
},
94
95
95
96
warnBeforeDestroy:function() {
96
97
alert(this.options.message);
97
-
//every Behavior has a hook into the
98
-
// view that it is attached to
98
+
//Every Behavior has a hook into the
99
+
// view that it is attached to.
99
100
this.view.destroy();
100
101
}
101
102
});
@@ -117,23 +118,22 @@ var ToolTip = Marionette.Behavior.extend({
117
118
});
118
119
```
119
120
120
-
Finally, the user must define a location for where their Behaviors are stored.
121
-
A simple example of this would look like this:
121
+
Finally, the user must define a location where their Behaviors are stored. Here is a simple example:
122
122
123
123
```js
124
124
Marionette.Behaviors.behaviorsLookup=function() {
125
125
returnwindow.Behaviors;
126
126
}
127
127
```
128
128
129
-
In this example you would then store your Behaviors like this:
129
+
In this example, you would then store your Behaviors like this:
130
130
131
131
```js
132
132
window.Behaviors.ToolTip= ToolTip;
133
133
window.Behaviors.DestroyWarn= DestroyWarn;
134
134
```
135
135
136
-
Note than in addition to extending a `View` with `Behavior`, a `Behavior` can itself use other Behaviors. The syntax is identical to that used for a `View`:
136
+
Note that in addition to extending a `View` with `Behavior`, a `Behavior` can itself use other Behaviors. The syntax is identical to that used for a `View`:
137
137
138
138
```js
139
139
var Modal =Marionette.Behavior.extend({
@@ -145,17 +145,16 @@ var Modal = Marionette.Behavior.extend({
145
145
});
146
146
```
147
147
148
-
Nested Behaviors act as if they were direct Behaviors of the parent Behavior's view instance.
148
+
Nested Behaviors act as if they were direct Behaviors of the parent `Behavior`'s view instance.
149
149
150
150
## API
151
151
152
152
### The Event Proxy
153
-
Behaviors are powered by an event proxy. What this means is that any events that are triggered by the view's `triggerMethod` function are passed to each Behavior on the view as well.
153
+
Behaviors are powered by an event proxy. This means that any events that are triggered by the view's `triggerMethod` function are passed to each `Behavior` on the `View` as well.
154
154
155
-
As a real world example, whenever in your View you would define a click event in the `events` hash, you can define the same event listeners and callbacks in the behavior's `events` hash. The same follows for `modelEvents` and `collectionEvents`. Think of your behavior as a receiver for all of the events on your view instance.
155
+
As a real world example, whenever you would define a click event in your `View`'s `events` hash, you can define the same event listeners and callbacks in the `Behavior`'s `events` hash. The same follows for `modelEvents` and `collectionEvents`. Think of your `Behavior` as a receiver for all of the events on your `View` instance.
156
156
157
-
This concept also allows for a nice decoupled method to communicate to behaviors from your view instance.
158
-
You can just call from within your view `this.triggerMethod("SomeEvent", {some: "data"})`. then your `behavior` class would look like this:
157
+
This concept also allows for a nice decoupled method to communicate to Behaviors from your `View` instance. You can just call the following from within your `View`: `this.triggerMethod("SomeEvent", {some: "data"})`. Then your `Behavior` class would look like this:
159
158
160
159
```js
161
160
Marionette.Behavior.extend({
@@ -171,7 +170,7 @@ Marionette.Behavior.extend({
171
170
172
171
173
172
### Model Events
174
-
`modelEvents` will respond to the view's model events.
173
+
`modelEvents` will respond to the `View`'s model events.
175
174
176
175
```js
177
176
Marionette.Behavior.extend({
@@ -186,7 +185,7 @@ Marionette.Behavior.extend({
186
185
```
187
186
188
187
### Collection Events
189
-
`collectionEvents` will respond to the view's collection events.
188
+
`collectionEvents` will respond to the `View`'s collection events.
In addition to providing the same event hashes as Views, Behaviors allow you to use the same life cycle functions that you find on Views.
205
-
That means methods like `initialize`, `onRender`, `onBeforeShow`, and `onBeforeDestroy` are all valid as long as the View that implements the Behavior fires the relevant events.
206
-
203
+
In addition to providing the same event hashes as Views, Behaviors allow you to use the same life cycle functions that you find on Views. That means methods like `initialize`, `onRender`, `onBeforeShow`, and `onBeforeDestroy` are all valid as long as the `View` that implements the `Behavior` fires the relevant events.
207
204
208
205
```js
209
206
Marionette.Behavior.extend({
210
207
211
208
onRender:function() {
212
-
//apply a jQuery plugin to every .foo item within the view
209
+
//Apply a jQuery plugin to every .foo item within the view
213
210
this.$('.foo').bar();
214
211
}
215
212
});
216
213
```
217
214
218
215
### Triggers
219
-
Any `triggers` you define on the `Behavior` will be triggered in response to the
220
-
appropriate event on the view.
216
+
Any `triggers` you define on the `Behavior` will be triggered in response to the appropriate event on the `View`.
221
217
222
218
```js
223
219
Marionette.Behavior.extend({
@@ -228,7 +224,7 @@ Marionette.Behavior.extend({
228
224
```
229
225
230
226
### Grouped Behaviors
231
-
Then `behaviors` key allows a behavior to group multiple behaviors together.
227
+
Then `behaviors` key allows a `Behavior` to group multiple behaviors together.
232
228
233
229
```js
234
230
Marionette.Behavior.extend({
@@ -239,7 +235,7 @@ Then `behaviors` key allows a behavior to group multiple behaviors together.
239
235
```
240
236
241
237
### $
242
-
`$` is a direct proxy of the view's `$` lookup method.
238
+
`$` is a direct proxy of the `View`'s `$` lookup method.
243
239
244
240
```js
245
241
Marionette.Behavior.extend({
@@ -250,8 +246,7 @@ Then `behaviors` key allows a behavior to group multiple behaviors together.
250
246
```
251
247
252
248
### $el and el
253
-
`el` is a direct proxy of the view's `el`.
254
-
Similarly, `$el` is a direct proxy of the view's `el` cached as a jQuery selector.
249
+
`el` is a direct proxy of the `View`'s `el`. Similarly, `$el` is a direct proxy of the `View`'s `el` cached as a jQuery selector.
255
250
256
251
```js
257
252
Marionette.Behavior.extend({
@@ -262,8 +257,7 @@ Marionette.Behavior.extend({
262
257
```
263
258
264
259
### defaults
265
-
`defaults` can be a `hash` or `function` to define the default options for your Behavior.
266
-
The default options will be overridden depending on what you set as the options per Behavior (this works just like a `Backbone.Model`).
260
+
`defaults` can be a `hash` or `function` to define the default options for your `Behavior`. The default options will be overridden depending on what you set as the options per `Behavior`. (This works just like a `Backbone.Model`.)
267
261
268
262
```js
269
263
Marionette.Behavior.extend({
@@ -285,7 +279,7 @@ Marionette.Behavior.extend({
285
279
```
286
280
287
281
### view
288
-
The `view` is a reference to the view instance that the Behavior is on.
282
+
The `view` is a reference to the `View` instance that the `Behavior` is attached to.
289
283
290
284
```js
291
285
Marionette.Behavior.extend({
@@ -297,9 +291,9 @@ Marionette.Behavior.extend({
297
291
298
292
### ui
299
293
300
-
Behaviors can have their own ui hash, which will be mixed into the ui hash of its associated view instance.
301
-
ui elements defined on either the Behavior or the View will be made available within events, and triggers. They
302
-
also are attached directly to the Behavior and can be accessed within Behavior methods as `this.ui`.
294
+
Behaviors can have their own `ui` hash, which will be mixed into the `ui` hash of its associated `View` instance.
295
+
`ui` elements defined on either the `Behavior` or the `View` will be made available within events and triggers. They
296
+
also are attached directly to the `Behavior` and can be accessed within `Behavior` methods as `this.ui`.
0 commit comments