The HtmlHelperProperty is a simple and efficient way to include JavaScript, CSS, and various meta information to your pages when you’re working in a MVC environment. One of the biggest challenges when working with two or more included views is managing each distinct view’s JavaScript and CSS dependencies.
Approaches to Managing Dependent Files
One common approach is to determine which files are required and add them all to the HTML template’s header. While this method serves a specific case well, it does not scale. If it so happens that you need to include a new view with new dependencies, you’ll have to modify the header again.
A second approach is to include each dependent file in-line with the view. This method doesn’t require that you modify the header on each dependency change, but may result in the same external JavaScript or CSS file being duplicated per view stack.
Assuming your page is structured as follows:
E.g. in menu.cfm:
<cfoutput>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('##menu').find('li').hover(function() {
$(this).stop().animate({ opacity: .8 });
}, function() {
$(this).stop().animate({ opacity: 1 });
});
});
</script>
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</div>
</cfoutput>
And then in copyright.cfm:
<cfoutput>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('##copyright').hover(function() {
$(this).text('Or not!');
});
});
</script>
<div id="copyright">Copyright Goes Here!</div>
</cfoutput>
As you can see in the example above, jquery.js is being included twice in the same view stack.
Using HtmlHelperProperty
Mach-II’s HtmlHelperProperty is a great way to get around these issues, allowing a single instance of an external JavaScript or CSS file to be loaded per page, without the need to maintain the head of the document every time you add a new one. The examples above can be re-written:
Menu.cfm:
<cfset getProperty('html').addJavascript('jquery.js') />
<cfoutput>
<script type="text/javascript">
$(document).ready(function() {
$('##menu').find('li').hover(function() {
$(this).stop().animate({ opacity: .8 });
}, function() {
$(this).stop().animate({ opacity: 1 });
});
});
</script>
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</div>
</cfoutput>
And then in copyright.cfm:
<cfset getProperty('html').addJavascript('jquery.js') />
<cfoutput>
<script type="text/javascript">
$(document).ready(function() {
$('##copyright').hover(function() {
$(this).text('Or not!');
});
});
</script>
<div id="copyright">Copyright Goes Here!</div>
</cfoutput>
When used, HtmlHelperProperty ensures that only one instance of the external JavaScript or CSS is loaded per page and added to the HTML <head> tag. This not only saves you time while maintaining your web site, but can make your pages more efficient since you only have to load the external scripts and styles when you need them rather than placing every one you’d ever need within the header block.
For more information on how to use the HtmlHelperProperty and what it can do for you, check out the official HtmlHelperProperty Mach-II Wiki.
HtmlHelperProperty Mach-II Wiki
Tags: beginner, ColdFusion, css, htmlheaderproperty, JavaScript, Mach-II
This is great! You could also use the new view tag library and convert:
<cfset getProperty(‘html’).addJavascript(‘jquery.js’) />
To:
<view:script src=”jquery”/>
Mach-II will use the shortcut file name system and append the file name and look up the directory for the javascript file. Even cleaner!