Skip to content

Commit 18d3227

Browse files
committed
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.
1 parent a2287a7 commit 18d3227

File tree

1 file changed

+38
-44
lines changed

1 file changed

+38
-44
lines changed

docs/marionette.behavior.md

+38-44
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
# Marionette.Behavior
44

55

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.
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.
77

88
## Documentation Index
99

@@ -22,11 +22,11 @@ A `Behavior` is an isolated set of DOM / user interactions that can be mixed in
2222

2323
## The Motivation
2424

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.
2626

2727
These interactions tend to be chunks of logic that you want to use in multiple views.
2828

29-
## Using
29+
## Usage
3030

3131
Here is an example of a simple `ItemView`. Let's take a stab at simplifying it, and abstracting Behaviors from it.
3232

@@ -41,23 +41,24 @@ var MyView = Marionette.ItemView.extend({
4141
},
4242

4343
warnBeforeDestroy: function() {
44-
alert("you are destroying all your data is now gone!");
44+
alert("You are about to destroy all your data!");
4545
this.destroy();
4646
},
4747

4848
onShow: function() {
4949
this.ui.destroy.tooltip({
50-
text: "what a nice mouse you have"
50+
text: "What a nice mouse you have."
5151
});
5252
}
5353
});
5454
```
5555

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.
5757

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`.
6162

6263
```js
6364
var MyView = Marionette.ItemView.extend({
@@ -76,26 +77,26 @@ var MyView = Marionette.ItemView.extend({
7677
});
7778
```
7879

79-
Now let's create the `DestroyWarn` Behavior.
80+
Now let's create the `DestroyWarn` `Behavior`.
8081

8182
```js
8283
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.
8687
defaults: {
87-
"message": "you are destroying!"
88+
"message": "You are destroying!"
8889
},
8990

90-
// behaviors have events that are bound to the views DOM
91+
// Behaviors have events that are bound to the views DOM.
9192
events: {
9293
"click @ui.destroy": "warnBeforeDestroy"
9394
},
9495

9596
warnBeforeDestroy: function() {
9697
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.
99100
this.view.destroy();
100101
}
101102
});
@@ -117,23 +118,22 @@ var ToolTip = Marionette.Behavior.extend({
117118
});
118119
```
119120

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:
122122

123123
```js
124124
Marionette.Behaviors.behaviorsLookup = function() {
125125
return window.Behaviors;
126126
}
127127
```
128128

129-
In this example you would then store your Behaviors like this:
129+
In this example, you would then store your Behaviors like this:
130130

131131
```js
132132
window.Behaviors.ToolTip = ToolTip;
133133
window.Behaviors.DestroyWarn = DestroyWarn;
134134
```
135135

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`:
137137

138138
```js
139139
var Modal = Marionette.Behavior.extend({
@@ -145,17 +145,16 @@ var Modal = Marionette.Behavior.extend({
145145
});
146146
```
147147

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.
149149

150150
## API
151151

152152
### 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.
154154

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.
156156

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:
159158

160159
```js
161160
Marionette.Behavior.extend({
@@ -171,7 +170,7 @@ Marionette.Behavior.extend({
171170

172171

173172
### Model Events
174-
`modelEvents` will respond to the view's model events.
173+
`modelEvents` will respond to the `View`'s model events.
175174

176175
```js
177176
Marionette.Behavior.extend({
@@ -186,7 +185,7 @@ Marionette.Behavior.extend({
186185
```
187186

188187
### Collection Events
189-
`collectionEvents` will respond to the view's collection events.
188+
`collectionEvents` will respond to the `View`'s collection events.
190189

191190
```js
192191
Marionette.Behavior.extend({
@@ -201,23 +200,20 @@ Marionette.Behavior.extend({
201200

202201
### Life Cycle Methods
203202

204-
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.
207204

208205
```js
209206
Marionette.Behavior.extend({
210207

211208
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
213210
this.$('.foo').bar();
214211
}
215212
});
216213
```
217214

218215
### 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`.
221217

222218
```js
223219
Marionette.Behavior.extend({
@@ -228,7 +224,7 @@ Marionette.Behavior.extend({
228224
```
229225

230226
### 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.
232228

233229
```js
234230
Marionette.Behavior.extend({
@@ -239,7 +235,7 @@ Then `behaviors` key allows a behavior to group multiple behaviors together.
239235
```
240236

241237
### $
242-
`$` is a direct proxy of the view's `$` lookup method.
238+
`$` is a direct proxy of the `View`'s `$` lookup method.
243239

244240
```js
245241
Marionette.Behavior.extend({
@@ -250,8 +246,7 @@ Then `behaviors` key allows a behavior to group multiple behaviors together.
250246
```
251247

252248
### $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.
255250

256251
```js
257252
Marionette.Behavior.extend({
@@ -262,8 +257,7 @@ Marionette.Behavior.extend({
262257
```
263258

264259
### 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`.)
267261

268262
```js
269263
Marionette.Behavior.extend({
@@ -285,7 +279,7 @@ Marionette.Behavior.extend({
285279
```
286280

287281
### 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.
289283

290284
```js
291285
Marionette.Behavior.extend({
@@ -297,9 +291,9 @@ Marionette.Behavior.extend({
297291

298292
### ui
299293

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`.
303297

304298
```js
305299
Marionette.Behavior.extend({

0 commit comments

Comments
 (0)