Skip to content

Commit 243c873

Browse files
committed
Merge pull request #50 from 10gen/INT-334-view-hierarchy
INT-334 added view hierarchy to README and docs/
2 parents 48742c8 + 90162b0 commit 243c873

File tree

3 files changed

+15
-12
lines changed

3 files changed

+15
-12
lines changed

scout-ui/README.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@
33
The frontend for scout.
44

55

6-
## Some Tips and Tricks using Ampersand.js
6+
## Some Tips and Tricks using Ampersand.js
7+
8+
### View Hierarchy
9+
10+
This diagram shows the view hierarchy of Scout and where the `.js` files and `.jade` templates for each view are.
11+
12+
![](./docs/view_hierarchy.png)
713

814
### Subviews vs. renderCollection() vs. renderSubview()
915

1016
[Ampersand views](http://ampersandjs.com/docs#ampersand-view) offer a number of ways of rendering subviews inside of them, for modular view composition. Each have their own advantages for certain use cases.
1117

1218
#### Subviews
1319

14-
Subviews can be defined inside a `subviews` property when extending an AmpersandView, see [ampersand-view subviews](http://ampersandjs.com/docs#ampersand-view-subviews). An example would look like this:
20+
Subviews can be defined inside a `subviews` property when extending an AmpersandView, see [ampersand-view subviews](http://ampersandjs.com/docs#ampersand-view-subviews). An example would look like this:
1521

1622
```js
1723
var AmpersandView = require('ampersand-view');
@@ -22,7 +28,7 @@ module.exports = AmpersandView.extend({
2228
subviews: {
2329
controlpanel: { // just a name, choose something
2430
container: '[data-hook=controlpanel-subview]', // use *-subiew hook
25-
waitFor: 'model.controls', // waits until model.controls becomes true-thy
31+
waitFor: 'model.controls', // waits until model.controls becomes true-thy
2632
prepareView: function (el) {
2733
return new ControlPanelView({ // return new view instance
2834
el: el, // always pass in the el element
@@ -33,15 +39,15 @@ module.exports = AmpersandView.extend({
3339
});
3440
```
3541
36-
Subviews defined this way in the `subviews` property **replace** the DOM element container. Keep this in mind when writing your .html or .jade templates. It makes no sense to add a class or id or any other attributes to the container element, as it will be removed and replaced with the root of the subview.
42+
Subviews defined this way in the `subviews` property **replace** the DOM element container. Keep this in mind when writing your .html or .jade templates. It makes no sense to add a class or id or any other attributes to the container element, as it will be removed and replaced with the root of the subview.
3743
3844
**Pro Tip:** A good convention is to always use a hook ending in `-subview`, as opposed to `-container` (see below), to make it easy to see which elements are replaced and which ones stay in the DOM.
3945
4046
#### renderCollection()
4147
42-
AmpersandView also has a [`.renderCollection()`](http://ampersandjs.com/docs#ampersand-view-rendercollection) method. It takes an AmpersandCollection, a view class, and a container selector and renders an instance of the view for each model in the collection inside the container. It also listens to changes in the collection and automatically removes or adds new views.
48+
AmpersandView also has a [`.renderCollection()`](http://ampersandjs.com/docs#ampersand-view-rendercollection) method. It takes an AmpersandCollection, a view class, and a container selector and renders an instance of the view for each model in the collection inside the container. It also listens to changes in the collection and automatically removes or adds new views.
4349
44-
A typical example often uses `.renderCollection()` inside the `render()` method and could look like this:
50+
A typical example often uses `.renderCollection()` inside the `render()` method and could look like this:
4551
4652
```js
4753
var AmpersandView = require('ampersand-view');
@@ -56,7 +62,7 @@ module.exports = AmpersandView.extend({
5662
}
5763
```
5864
59-
**Pro Tip:** As a convention, here we use a hook ending in `-container`, because the container remains in the DOM.
65+
**Pro Tip:** As a convention, here we use a hook ending in `-container`, because the container remains in the DOM.
6066
6167
6268
#### renderSubview()
@@ -83,9 +89,6 @@ module.exports = AmpersandView.extend({
8389
}
8490
```
8591
86-
This is similar to the `.renderCollection()` example, except it applies to a single view instance instead of multiple views.
87-
88-
**Pro Tip:** As a convention, again we use a hook ending in `-container`, because the container remains in the DOM.
89-
90-
92+
This is similar to the `.renderCollection()` example, except it applies to a single view instance instead of multiple views.
9193
94+
**Pro Tip:** As a convention, again we use a hook ending in `-container`, because the container remains in the DOM.
2.67 KB
Binary file not shown.

scout-ui/docs/view_hierarchy.png

207 KB
Loading

0 commit comments

Comments
 (0)