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: docs/marionette.behavior.md
+52-31
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 `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.
7
7
8
8
## Documentation Index
9
9
@@ -22,13 +22,13 @@ 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
29
## Using
30
30
31
-
Here is an example of a simple `itemView`. Let's take a stab at simplifying it, and abstracting behaviors from it.
31
+
Here is an example of a simple `ItemView`. Let's take a stab at simplifying it, and abstracting Behaviors from it.
32
32
33
33
```js
34
34
var MyView =Marionette.ItemView.extend({
@@ -53,11 +53,11 @@ var MyView = Marionette.ItemView.extend({
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 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`to lookup the correct `Behavior` class.
60
-
The options for each behavior are also passed to said 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. The options are then stored within each Behavior under `options`.
61
61
62
62
```js
63
63
var MyView =Marionette.ItemView.extend({
@@ -76,7 +76,7 @@ var MyView = Marionette.ItemView.extend({
76
76
});
77
77
```
78
78
79
-
Now let's create the `DestroyWarn`behavior.
79
+
Now let's create the `DestroyWarn`Behavior.
80
80
81
81
```js
82
82
var DestroyWarn =Marionette.Behavior.extend({
@@ -117,7 +117,7 @@ var ToolTip = Marionette.Behavior.extend({
117
117
});
118
118
```
119
119
120
-
Finally, the user must define a location for where their `behaviors` are stored.
120
+
Finally, the user must define a location for where their Behaviors are stored.
121
121
A simple example of this would look like this:
122
122
123
123
```js
@@ -126,14 +126,14 @@ A simple example of this would look like this:
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 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`:
137
137
138
138
```js
139
139
var Modal =Marionette.Behavior.extend({
@@ -145,37 +145,30 @@ 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
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.
154
154
155
-
As a real world example, whenever in your `view` you would have `onShow`, your behavior can also have this `onShow` method defined. 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 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.
156
156
157
157
This concept also allows for a nice decoupled method to communicate to behaviors from your view instance.
158
158
You can just call from within your view `this.triggerMethod("SomeEvent", {some: "data"})`. then your `behavior` class would look like this:
159
159
160
160
```js
161
161
Marionette.Behavior.extend({
162
-
onSomeEvent:function(data) {
162
+
events: {
163
+
'click .foo':'onClick'
164
+
},
165
+
166
+
onClick:function(data) {
163
167
console.log("wow such data", data);
164
168
}
165
169
});
166
170
```
167
171
168
-
### Triggers
169
-
Any `triggers` you define on the `Behavior` will be triggered in response to the
170
-
appropriate event on the view.
171
-
172
-
```js
173
-
Marionette.Behavior.extend({
174
-
triggers: {
175
-
'click .label':'click:label'
176
-
}
177
-
});
178
-
```
179
172
180
173
### Model Events
181
174
`modelEvents` will respond to the view's model events.
@@ -206,6 +199,34 @@ Marionette.Behavior.extend({
206
199
});
207
200
```
208
201
202
+
### Life Cycle Methods
203
+
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
+
207
+
208
+
```js
209
+
Marionette.Behavior.extend({
210
+
211
+
onRender:function() {
212
+
//apply a jQuery plugin to every .foo item within the view
213
+
this.$('.foo').bar();
214
+
}
215
+
});
216
+
```
217
+
218
+
### Triggers
219
+
Any `triggers` you define on the `Behavior` will be triggered in response to the
220
+
appropriate event on the view.
221
+
222
+
```js
223
+
Marionette.Behavior.extend({
224
+
triggers: {
225
+
'click .label':'click:label'
226
+
}
227
+
});
228
+
```
229
+
209
230
### Grouped Behaviors
210
231
Then `behaviors` key allows a behavior to group multiple behaviors together.
211
232
@@ -218,7 +239,7 @@ Then `behaviors` key allows a behavior to group multiple behaviors together.
218
239
```
219
240
220
241
### $
221
-
`$` is a direct proxy of the views`$` lookup method.
242
+
`$` is a direct proxy of the view's`$` lookup method.
222
243
223
244
```js
224
245
Marionette.Behavior.extend({
@@ -241,8 +262,8 @@ Marionette.Behavior.extend({
241
262
```
242
263
243
264
### defaults
244
-
`defaults` can be a `hash` or `function` to define the default options for your behavior.
245
-
The default options will be overridden depending on what you set as the options per behavior (this works just like a `backbone.model`).
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`).
246
267
247
268
```js
248
269
Marionette.Behavior.extend({
@@ -264,7 +285,7 @@ Marionette.Behavior.extend({
264
285
```
265
286
266
287
### view
267
-
The `view` is a reference to the view instance that the `behavior` is on.
288
+
The `view` is a reference to the view instance that the Behavior is on.
268
289
269
290
```js
270
291
Marionette.Behavior.extend({
@@ -277,8 +298,8 @@ Marionette.Behavior.extend({
277
298
### ui
278
299
279
300
Behaviors can have their own ui hash, which will be mixed into the ui hash of its associated view instance.
280
-
ui elements defined on either the behavior or the view will be made available within events, and triggers. They
281
-
also are attached directly to the behavior and can be accessed within behavior methods as `this.ui`.
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`.
Copy file name to clipboardExpand all lines: docs/marionette.behaviors.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -2,8 +2,8 @@
2
2
3
3
# Marionette.Behaviors
4
4
5
-
'Marionette.Behaviors' is a utility class that takes care of glueing your `behavior` instances to their given `View`.
6
-
The most important part of this class is that you **MUST** override the class level `behaviorsLookup` method or set the option `behaviorClass` for things to work properly.
5
+
'Marionette.Behaviors' is a utility class that takes care of gluing your `Behavior` instances to their given `View`.
6
+
The most important thing to understand when using this class is that you **MUST** override the class level `behaviorsLookup` method or set the option `behaviorClass` for things to work properly.
7
7
8
8
## Documentation Index
9
9
*[API](#api)
@@ -13,21 +13,21 @@ The most important part of this class is that you **MUST** override the class le
13
13
14
14
## API
15
15
16
-
There are two class level methods that you can override on the `Behaviors` class. The rest of the class is tied to under the hood implementation details of views.
16
+
There are two class level methods that you can override on the `Behaviors` class. The rest of the class is tied to under the hood implementation details of Views.
17
17
18
18
### behaviorsLookup
19
19
20
-
This method defines where your behavior classes are stored. A simple implementation might look something like this.
20
+
This method defines where your Behavior classes are stored. A simple implementation might look something like this.
21
21
22
22
```js
23
23
Marionette.Behaviors.behaviorsLookup=function() {
24
24
returnwindow.Behaviors;
25
25
}
26
26
```
27
27
28
-
By default the behaviors are looked up by their key value in a given views behavior hash.
28
+
By default the Behaviors are looked up by their key value in a given View's behavior hash.
29
29
30
-
In this sample (using the default `getBehaviorClass` implementation) your code will expect the following behaviors to be present in `window.Behaviors.DestroyWarn` and `window.Behaviors.ToolTip`
30
+
In this sample (using the default `getBehaviorClass` implementation) your code will expect the following Behaviors to be present in `window.Behaviors.DestroyWarn` and `window.Behaviors.ToolTip`
31
31
32
32
```js
33
33
var MyView =Marionette.ItemView.extend({
@@ -44,7 +44,7 @@ var MyView = Marionette.ItemView.extend({
44
44
45
45
### getBehaviorClass
46
46
47
-
This method has a default implementation that is simple to override. It is responsible for the lookup of single behavior from within the `Behaviors.behaviorsLookup` or elsewhere.
47
+
This method has a default implementation that is simple to override. It is responsible for the lookup of single Behavior from within the `Behaviors.behaviorsLookup` or elsewhere.
This property lets you pass a `class` in for the `behavior` to use (bypassing the normal key based lookup). This is nice to have when the behavior is a dependency of the view in [requirejs](http://requirejs.org/). Properties passed in this way will be used in `getBehaviorClass`.
61
+
This property lets you pass a `class` in for the Behavior to use (bypassing the normal key based lookup). This is nice to have when the Behavior is a dependency of the View in a module system like [requirejs](http://requirejs.org/) or [browserify](http://browserify.org/). Properties passed in this way will be used in `getBehaviorClass`.
0 commit comments