Skip to content

Commit

Permalink
Made some formatting changes to helpers and views. Added authors sect…
Browse files Browse the repository at this point in the history
…ion to those docs.
  • Loading branch information
dlochrie committed Apr 26, 2013
1 parent 49f1a92 commit 59f472e
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 17 deletions.
70 changes: 61 additions & 9 deletions essentials/helpers.md
Expand Up @@ -8,22 +8,22 @@ will help to make your app more portable and easier to maintain.
Say we have a Users model, and an index page listing all our users. We could create
the following link in our view:

`<a href="/users/index">Users</a>`
<a href="/users/index">Users</a>

While that may work for now, we can also use a helper to create the link for us:

`linkTo('Users', pathTo.users)`
linkTo('Users', pathTo.users)

The benefit of using `pathTo`, is that it will handle the adding the path to page for you,
using the routes configuration file (`/config/routes.js`).

To see your routes, do the following in the node console:

`compound routes`
compound routes

And you will get a list of your current routes in the following format:

`users GET /users.:format? users#index`
users GET /users.:format? users#index`

In the example above, from left-to-right:

Expand Down Expand Up @@ -59,11 +59,11 @@ You can also specify a jsonp parameter to handle the response:
The server will reply with json response { users: [ {}, {}, {} ] }, and this object will be passed as an argument
to the _renderUsers_ function (you will need to create this method in your users_controller):

`renderUsers({users: [{},{},{}]});`
renderUsers({users: [{},{},{}]});

You can also specify an anonymous function in the jsonp param:

`{ jsonp: '(function (url) { location.href = url; })' }`
{ jsonp: '(function (url) { location.href = url; })' }

If the server sent you "http://google.com/", the following javascript will be evaluated:

Expand Down Expand Up @@ -328,12 +328,64 @@ We are going to assume a couple things:

### JavaScript & CSS

[ ... ]
Calling CSS and JavaScript files in your views are easy.

For CSS:

stylesheet_link_tag('bootstrap', 'application', '...')

and for JavaScript:

javascript_include_tag('application', 'date-picker', '...')

You do not need to include the file extension, because Compound will add it for you.
All paths are _relative_ to the _/public/stylesheets_ and _/public/javascripts_ directories,
respectively.

If you want to include an external CSS or JavaScript, you can use the following format:

javascript_include_tag('//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js')

> In the example above, the preceding _http_ or _https_ was ommitted, since Google's CDN
> provides both SSL and non-SSL versions of the file. Your browser will append the appropriate
> prefix.
### Content Tags

[ ... ]
[ coming soon ]

### Custom Helpers

[ ... ]
You can create your own custom helpers to perform simple tasks for your view's content.
Helpers are found in the `app/helpers` directory, and they are named in following convention:

controller_helper.js

Where _controller_ is the name of the controller (and therefore the directory where the views
reside).

If you want a controller to affect the entire application, add it to the _application_helper.js_
file.

Let's create a helper to format a date:

module.exports = {
...

formatDate: function (date) {
return date.toUTCString();
},

...

};


Assuming that we have a `date` varaiable available to our view, we can use our custom helper in view
to format it like this:

Created on: <%- formatDate(date) %>


##Authors
[Daniel Lochrie](https://github.com/dlochrie)
18 changes: 10 additions & 8 deletions essentials/views.md
Expand Up @@ -71,26 +71,25 @@ to your view, so you can simplify the view above like so:
> Tip: Don't add the extension to the your view when you are rendering it - Compound is aware of the
templating/view engine, and will know what extension to add.

### Partials - Including a View Inside Another View
### Inludes - Including a View Inside Another View

_Partials_, also called _includes_, are views that are called by other views. Partials are very
_Includes_, also called _partials_, are views that are called by other views. _Includes_ are very
helpful for forms (`edit` and `add` for most resources share _most_ of the form), header files,
rendering rows in a table, and more.

#### Using Partials/Includes

In `ejs`, we can include a view inside of another view by following this pattern:
In `ejs`, we can include a view inside of another view by following this pattern:

<%- include _form %>
<%- include _form %>

... and in `jade` by the following pattern:
... and in `jade` by the following pattern:

include _form

As you can see, the two templating engines are nearly identical in how they call _partials_
(aka _includes_).
As you can see, the two templating engines are nearly identical in how they call _includes_.

They are also alike in the following ways:
_Partials_ share the following conventions in both `ejs` and `jade`:

* Neither `ejs` nor `jade` require the use of the file's extension (_.ejs_, _.jade_).
* Both call the included file by looking for it _relative_ to the calling file. So if you don't
Expand Down Expand Up @@ -145,3 +144,6 @@ left your controller and models.

Remember to ask yourself, is this data available to my view? If not, then most likely you will need to go
back to your controller/model and refactor.

##Authors
[Daniel Lochrie](https://github.com/dlochrie)

0 comments on commit 59f472e

Please sign in to comment.