You are viewing documentation for v1.0.x. Change

Partials

Simplify your views by breaking them down into partial page templates.

Partials in Wheels act as a wrapper around the good old <cfinclude> tag. By calling includePartial() or renderPartial(), you can include other view files in a page, just like <cfinclude> would. But at the same time, partials make use of common Wheels features like layouts, caching, model objects, and so on.

These functions also add a few cool things to your development arsenal like the ability to pass in a query or array of objects and have the partial file called on each iteration (to name one).

Why Use a Partial?

Websites often display the same thing on multiple pages. It could be an advertisement area that should be displayed in an entire section of a website or a shopping cart that is displayed while browsing products in a shop. You get the idea. To avoid duplicating code, you can place it in a file (the "partial" in Wheels terms) and include that file using includePartial() on the pages that need it.

Even when there is no risk of code duplication, it can still make sense to use a partial. Breaking up a large page into smaller, more manageable chunks will help you focus on each part individually.

If you've used <cfinclude> a lot in the past (and who hasn't?!), you probably already knew all of this though, right?

Storing Your Partial Files

To make it clear that a file is a partial and not a full page, we start the filename with an underscore character. You can place the partial file anywhere in the views folder. When locating partials, Wheels will use the same rules as it does for the template argument to renderPage(). This means that if you save the partial in the current controller's view folder, you reference it simply by its name.

For example, if you wanted to have a partial for a comment in your blog controller, you would save the file at views/blog/_comment.cfm and reference it (in includePartial() and renderPartial()) with just "comment" as the first argument.

Sometimes it's useful to share partials between controllers though. Perhaps you have a banner ad that should be displayed across several controllers. One common approach then is to save them in a dedicated folder for this at the root of the views folder. To reference partials in this folder, in this case named shared, you would then pass in "/shared/banner" to includePartial() instead.

Making the Call

Now that we know why we should use partials and where to store them, let's make a call to includePartial() from a view page to have Wheels display a partial's output.

<cfoutput>#includePartial("banner")#</cfoutput>

That code will look for a file named _banner.cfm in the current controller's view folder and include it.

Let's say we're in the blog controller. Then the file that will be included is views/blog/_banner.cfm.

As you can see, you don't need to specify the .cfm part or the underscore when referencing a partial.

Passing in Data

You can pass in data by adding named arguments on the includePartial() call. Because we use the partial argument to determine what file to include, you can't pass in a variable named partial though. The same goes for the other arguments as well, like layout, spacer, and cache.

Here is an example of passing in a title to a partial for a form:

<cfoutput>
#includePartial(partial="loginRegisterForm", title="Please log in here")#
</cfoutput>

Now you can reference the title variable as arguments.title inside the _loginregisterform.cfm file.

If you prefer, you can still access the view variables that are set outside of the partial. The advantage with specifically passing them in instead is that they are then scoped in the arguments struct (which means less chance of strange bugs occurring due to variable conflicts). It also makes for more readable and maintainable code. (You can see the intent of the partial better when you see what is passed in to it).

Partials with Layouts

Just like a regular page, Wheels partials also understand the concept of layouts. To use this feature, simply pass in the name of the layout file you want to wrap the partial in with the layout argument, like this:

<cfoutput>
#includePartial(partial="newsItem", layout="/boxes/blue")#
</cfoutput>

This will wrap the partial with the code found in views/boxes/_blue.cfm. Just like with other layouts, you use contentForLayout() to represent the partial's content.

That said, your _newsitem.cfm file could end up looking something like this:

<div class="news">
<cfoutput>#contentForLayout()#</cfoutput>
</div>

One difference from page layouts is that the layout file for partials has to start with the underscore character.

It's also worth noting that it's perfectly acceptable to include partials inside layout files as well. This opens up the possibility to nest layouts in complex ways.

Caching a Partial

Caching a partial is done the same way as caching a page. Pass in the number of minutes you want to cache the partial for to the cache argument.

Here's an example where we cache a partial for 15 minutes:

<cfoutput>
#includePartial(partial="userListing", cache=15)#
</cfoutput>

Using Partials with an Object

Because it's quite common to use partials in conjunction with objects and queries, Wheels has built-in support for this too. Have a look at the code below, which passes in an object to a partial:

<cfset cust = model("customer").findByKey(params.key)>
<cfoutput>#includePartial(cust)#</cfoutput>

That code will figure out that the cust variable contains a customer model object. It will then try to include a partial named _customer.cfm and pass in the object's properties as arguments to the partial.

Try that code and <cfdump> the arguments struct inside the partial file, and you'll see what's going on. Pretty cool stuff, huh?

Using Partials with a Query

Similar to passing in an object, you can also pass in a query result set to includePartial(). Here's how that looks:

<cfset customers = model("customer").findAll()>
<cfoutput>#includePartial(customers)#</cfoutput>

In this case, Wheels will iterate through the query and call the _customer.cfm partial on each iteration. Similar to the example with the object above, Wheels will pass in the objects' properties (in this case represented by records in the query) to the partial.

In addition to that, you will also see that a counter variable is available. It's named current and is available when passing in queries or arrays of objects to a partial.

The way partials handle objects and queries makes it possible to use the exact same code inside the partial regardless of whether we're dealing with an object or query record at the time.

If you need to display some HTML in between each iteration (maybe each iteration should be a list item for example), then you can make use of the spacer argument. Anything passed in to that will be inserted between iterations. Here's an example:

<cfoutput>

<ul>
<li>#includePartial(partial=customers, spacer="</li><li>")#</li>
</ul>

</cfoutput>

Partials and Grouping

There is a feature of CFML that is very handy: the ability to output a query with the group attribute. Here's an example of how this can be done with a query that contains artists and albums (with the artist potentially being duplicated since they can have more than one album):

<cfoutput query="artistsAndAlbums" group="artistid">
<!--- Artist info is displayed just once for each artist here --->
<cfoutput>
<!--- Each album is looped here --->
</cfoutput>
</cfoutput>

We have ported this great functionality into calling partials with queries as well. Here's how you can achieve it:

#includePartial(partial=artistsAndAlbums, group="artistId")#

When inside the partial file, you'll have an additional subquery made available to you named group, which contains the albums for the current artist in the loop.

Using Partials with an Array of Objects

As we've hinted previously in this chapter, it's also possible to pass in an array of objects to a partial. It works very similar to passing in a query in that the partial is called on each iteration.

Rendering or Including?

So far we've only talked about includePartial(), which is what you use from within your views to include other files. There is another similar function as well: renderPartial(). This one is used from your controller files when you want to render a partial instead of a full page. At first glance, this might not make much sense to do. There is one common usage of this though—AJAX requests.

Let's say that you want to submit comments on your blog using AJAX. For example, the user will see all comments, enter their comment, submit it, and the comment will show up below the existing ones without a new page being loaded.

In this case, it's useful to use a partial to display each comment (using includePartial() as outlined above) and use the same partial when rendering the result of the AJAX request.

Here's what your controller action that receives the AJAX form submission would look like:

<cfset comment = model("comment").create(params.newComment)>
<cfset renderPartial(comment)>

Please note that there currently is no support for creating the AJAX form directly with Wheels. This can easily be implemented using a JavaScript library such as jQuery or Prototype though.

^ Top
Table of Contents

Comments

Read and submit questions, clarifications, and corrections about this chapter.

[Add Comment]

  1. Tom's Gravatar Tom says:

    Is there a way to tell partials to use a different file to render a model... so for example, if I have an 'artist' model, and I pass an array of 'artist' objects and I use includePartial(partial=artists), is there a way I can get it to use _artistSearchResult instead of _artist as the partial file it uses without creating a whole new model?

    Reason for this is that I want the looping functionality but want to render partials differently depending on where they are in the site (search results, artist listing page and so forth)

    Thanks!

  2. Max's Gravatar Max says:

    In every project developer is forced to create placeholders on the screen, so he could go back and fill it with content later, that is why CFInclude was for, and then CFMODULE.
    With includePartial() is a step further, but we want to see what is the smartest way to use this in MVC & database driven websites. Spesificly I am talking about to break down the page into placeholders (Regions that has components and modules that belongs to those components), that would give any developer to concentrate only on items to fill in the “blanks” – to develop modules and plug-ins.
    It would be nice to see a screen cast on how to use includePartial().
    Especially:
    - Using Partials with an Object (using it in dynamic way)
    - Partials and Grouping
    - Using Partials with an Array of Objects
    - dataFunction (how to use it to full extent)?

    Thank you for your time.
    Max

  3. Dave's Gravatar Dave says:

    Can this function be used to include functionality from outside the wheels site, for instance, a global menu that may be used for a site collection?

Add Comment