Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update Handlebars command-line Example to use yhandlebars #229

Closed
wants to merge 1 commit into from

4 participants

@cquinders

Using the handlebars.js command-line application to precompile templates in a build process brings some trouble to your use function.

I customized the handlebars.js command-line application to use YUI Handlebars to precompile templates and render them to a YUI module which requires handlebars-base. This cleans up the use function nicely.

To fit with Loader it creates a raw .js, a debug -debug.js and a minificated -min.js version when outputted to a file.

@ericf
Owner

@clickholddrag Cool!

Thinking ahead here… @davglass is currently working on a better build system for YUI, Shifter, I'm wondering if it makes sense to add what is essentially yhandlebars as a task to Shifter. What do you think?

@cquinders

@ericf Great idea!

I also thought about implementing it as a task to ybuild and have it precompile templates on a module basis. I think it could be useful to place templates of a View in the modules folder and have it processed during build, like it is with assets or lang folders.

I will definetly look into Shifter and see if it can replace YUI Builder for me now. Do you already use it in production?

Apart from that i think that a standalone solution like yhandlebars can be useful to people in the meantime.

@davglass
Owner
@cquinders

@davglass Sure!

I added an MIT-License to the package.

@ericf
Owner

I would still prefer that we don't remove the old docs which mention using the handlebars CLI, but instead modify them to include yhandlebars as another option.

@evocateur

We're using a very similar module I wrote called mustache-wax to do the same thing at Zillow. I am a little leery of advocating usage of a module (such as yhandlebars) without a single unit test.

I'm very interested in Shifter, though. I could see moving this functionality into a gear-lib and employing it via Shifter. (or @rgrove's newest proposal davglass/shifter#11 :D)

@ericf
Owner

@clickholddrag I'm waiting for a response to my comment above.

@cquinders

@ericf Sorry for the long time off. In the meantime I installed shifter and used it heavily. I definetly think it is the perfect place for template precompilation. By now I precompile my templates with yhandlebars via an exec task in shifter. However, this feels kind of like a hack to me. As soon as I have some time left I will think about a contribution to shifter regarding this topic. I see that this is on peoples minds already and I like the direction that @rgrove’s proposal in yui/shifter#11 is heading for.

I can also see your point regarding this pull request. Maybe it really would be the best idea to not touch the handlebars example and instead just give a short reference to mustache-wax and yhandlebars until they become obsolete because of shifter’s built in template precompilation?

@ericf
Owner

Okay, let's move in the direction us using a Shifter task do this work. @clickholddrag or @evocateur feel free to take lead on adding that to Shifter.

@ericf ericf closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 10 additions and 23 deletions.
  1. +10 −23 src/handlebars/docs/index.mustache
View
33 src/handlebars/docs/index.mustache
@@ -1178,7 +1178,7 @@ To see this simple server in action, save it to a file, install Express and YUI
<h5>On the Command Line</h5>
<p>
-The original Handlebars project provides a Node.js-based Handlebars command-line application that can be installed via npm and used to precompile Handlebars template files. Since the precompiled templates produced by the original Handlebars are compatible with YUI Handlebars, this is a great way to precompile your Handlebars templates manually or as part of a build process.
+There is a yhandlebars command-line application, that is based on the command-line application provided by the original Handlebars project but uses YUI Handlebars. It can be installed via npm and used to precompile Handlebars template files. This is a great way to precompile your Handlebars templates manually or as part of a build process.
</p>
<p>
@@ -1186,23 +1186,23 @@ First, you'll need to install <a href="http://nodejs.org/">Node.js</a> and <a hr
</p>
<p>
-Next, install the Handlebars npm module. Note that this program is maintained by the maintainers of the <a href="https://github.com/wycats/handlebars.js">original Handlebars project</a>, so there's a chance it could change or break compatibility with YUI Handlebars without notice.
+Next, install the yhandlebars npm module.
</p>
```terminal
-$ npm install -g handlebars
+$ npm install -g yhandlebars
```
<p>
-Now you can run the `handlebars` executable to precompile a template into JavaScript code.
+Now you can run the `yhandlebars` executable to precompile a template into JavaScript code.
</p>
```terminal
-$ handlebars my-template.handlebars -f precompiled-template.js
+$ yhandlebars my-template.handlebars -f handlebars-templates.js
```
<p>
-This will compile a template to a JavaScript file which you can load on your page. You could render it like this:
+This will compile a template to a YUI module file which you can load on your page. You could render it like this:
</p>
```
@@ -1215,23 +1215,10 @@ This will compile a template to a JavaScript file which you can load on your pag
<script src="http://yui.yahooapis.com/{{{yuiVersion}}}/build/yui/yui-min.js"></script>
<script>
-YUI().use('handlebars-base', 'get', 'node', function (Y) {
- // Create a global Handlebars variable that points to Y.Handlebars. This is
- // necessary for compatibility with precompiled templates generated by the
- // original Handlebars project.
- window.Handlebars = Y.Handlebars;
-
- // Load the precompiled template JS onto the page.
- Y.Get.js('precompiled-template.js', function (err) {
- if (err) {
- Y.error('Template failed to load: ' + err);
- return;
- }
-
- // Render the template and insert its output into the page.
- var output = Y.Handlebars.templates['my-template']({food: 'pie'});
- Y.one('#content').append(output);
- });
+YUI().use('handlebars-templates', 'node', function (Y) {
+ // Render the template and insert its output into the page.
+ var output = Y.Handlebars.templates['my-template']({food: 'pie'});
+ Y.one('#content').append(output);
});
</script>
</body>
Something went wrong with that request. Please try again.