EzDevInfo.com

hogan.js with master pages or layouts

Is it possible in any way to use hogan.js as template engine with layouts something like "Razor or master pages in .NET"? I would get a result like this:

layout.hjs: contains "header" & "footer"

and

index.hjs: will include layout.hjs and contain only page content.

Laravel 4 Blade {{}} and Hogan.js {{}} Syntax

I am using Laravel 4 with the Blade Templating Engine and Hogan.js.

By default my site thinks {{...}} is used by PHP and Laravel. Now I want to use Hogan.js and the syntax is {{...}} too. I am getting an error, because they use the same syntax here.

How can I use both?

Which hogan.js templeting package to use with express.js?

The hogan.js template package that express provide is hjs, however, that package last update was a year ago, and the repo at github got issues opened also a year ago (though not really crucial ones).

There also seems to be more than one hogan.js package for express tempting at npm which left me confused!

Express 3.x best layout implementation (template engines)

From what I've read, ExpressJS 3, dropped support of layouts, leaving it to the template engines. So if an engine, doesn't have a support for layouts, what's the best Node.js module that will have it? Or if best sounds subjective, not best but at least a working solution?

I'm going to use Hogan.js as a template engine.

Or, maybe there's a better alternative to layouts as a concept? I find it rather helpful but will like to read about other approaches.

Partials with Node.js + Express + Hogan.js

I'm developing a site with Node.js + Express and using as view engine Hogan.js.

This is my file app.js:

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'hjs');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(app.router);
  app.use(require('less-middleware')({ src: __dirname + '/public' }));
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);
app.get('/about', routes.about);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

The file /routes/index.js is:

/*
 * GET pages.
 */

exports.index = function(req, res){
  res.render(
    'index',
    {
      title: 'Home Page',
      author: 'Bruce Wayne'
    }
  );
};

exports.about = function(req, res){
  res.render(
    'about',
    {
      title: 'About Page',
      author: 'Bruce Wayne'
    }
  );
};

In /views folder, there are:

|- part.hjs

|- index.hjs

|- cv.hjs

The file part.hjs is:

<h3>Hello {{ author }}</h3>

The file index.hjs is:

<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.

And the file about.hjs is:

<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.

I've two questions:

1. How can I use properly the partials in my pages? (this code doesn't work)
2. Can I use the same "title" for two or more pages without repeat the values assignment in file /routes/index.js?

Best regards, Vi.

Is hogan.js unmaintained? Is it safe to use? [closed]

I've seen that Twitter's hogan.js is not making progress and it's somewhat abandoned (github: https://github.com/twitter/hogan.js). The issues are not being attended, and last version in NPM is 2.0.0 (https://www.npmjs.org/package/hogan.js), while in github is already 3.0.0. Eight months ago it was asked to be updated in NPM and it has not been done yet (https://github.com/twitter/hogan.js/issues/111).

Is Twitter still using Mustache templates? Why is this project so unattended? Would you use it for a real life product?

How to load templates with Hogan.JS from an external file?

I use Hogan.JS as JavaScript templating library. It is supposed to load JavaScript templates from external files. One can probably outsource several templates in an external JavaScript file.

Does anyone know how to do that?

I have the following code sample:

<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/hogan-2.0.0.min.js"></script>
    <script id="scriptTemplate" type="text/mustache">
      <p>Your text here: {{text}}</p>
    </script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var template = $('#scriptTemplate').html();
      var compiledTemplate = Hogan.compile(template);
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>

With the IDs I can address the templates but I always need a separate inline script. :-(

How does this work with external files?

How to use Twitter typehead.js with Angular compile function?

I am trying to use Twitter's typeahead.js (not the Bootstrap one) along with AngularJS. I can get it all up and running just fine, until I try to get fancy use the custom template and engine options.

If I use Twitter's own Hogan.js for templating, and pass in a string template via a script tag, I am able to render the custom results that I want, but it is just pure HTML and none of the Angular directives will work.

My question is, how can I utilize the typeahead.js library and render my own custom result, and also utilize Angular's powerful compilation and two way bindings. Here is a gist with some sample code to illustrate what I am trying to achieve. Any help would be greatly appreciated!

Gist with sample code: https://gist.github.com/i8ramin/5690826

Iterate through keys/values in Hogan.js

Is there a way to iterate through keys and values in an object using Hogan.js? I'm unable to find such documented functionality - only iteration over arrays seems to be documented. Is it even possible to iterate through objects in hogan.js (or any other moustache.js implementation)?

How to handle string or array of strings in mustache template

I have a simple/beginner question for using mustache templating in my app (or Hogan more accurately). I am using an API which sometimes returns a String and sometimes returns an Array of Strings.

I know could wrap the String in a single-element array, but is there also a way to handle this optionality from the mustache template?

Using normal sections like
{{#stringOrArray}} <li>{{.}}</li> {{/stringOrArray}} doesn't print the value if its just a String.

Getting typeahead.js to work with dynamic content, Bottle and Hogan

Expected Behaviour

The search field should display results like the 'Open Source Projects by Twitter' example on:

http://twitter.github.io/typeahead.js/examples/

Current Behaviour

• No drop down is appearing when I enter search text.
• No errors in Firebug.
• All necessary 'container' divs seem to be loaded (but hidden with display:none) beneath the search field.
• Results are not generated or displayed.
• Firebug > Net DOES display GET request for json file when loading content, and the contents are available in the response tab.

Troubleshooting

Dynamic Content

Site content is loaded dynamically via getJSON().

Hogan and typeahead Scripts Are Included In Head

<script src="https://path/to/typeahead.min.js"></script>
<script src="https://path/to/hogan-2.0.0.js"></script>

Bottle and Hogan

I use Bottle which also uses the default placeholder used by Hogan ie {{value here}}.

So in Hogan.js, i changed the default delimeters from:

otag = '{{',
ctag = '}}';

to:

otag = '[[',
ctag = ']]';

Function

I created a function that would run after the dynamic content is loaded:

<script>
function getTypeAheadReady() {
$('.example-twitter-oss .typeahead').typeahead({                              
name: 'mygreatsearch',
valueKey: 'my_field_one',  
prefetch: 'https://path/to/static/courses.json',
template: [
'<p class="my-field-1">[[my_field_one]]</p>',
'<p class="my-field-2">[[my_field_two]]</p>',
'<p class="my-field-3">[[my_field_three]]</p>'
].join(''),
engine: Hogan  
})
}
</script>

Call

$("#content").html("");
$("#content").append(results.content);
getTypeAheadReady(); // re-initialise typeahead.js functionality for search

JSON

My JSON file seems to be correct:

[
{ "my_field_one": "val1", "my_field_two": "val2", "my_field_three": "val3". "tokens":["something"] },
{ "my_field_one": "val4", "my_field_two": "val5", "my_field_three": "val6", "tokens":["somethingelse"] },
]

It is located at https://path/to/static/courses.json and I can access it directly in the browser.

HTML (loaded from database)

<div class="example example-twitter-oss">
<div class="demo">
<input class="typeahead" type="text" placeholder="Placeholder 'text'">
</div>
</div>

CSS

And CSS seems to be correct:

.tt-dropdown-menu {
  text-align: left;
}

.title,
.my-field-1 {
  font-family: Prociono;
}

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.course-title {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
      border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
      border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
      box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.example-twitter-oss .tt-suggestion {
  padding: 8px 20px;
}

.example-twitter-oss .tt-suggestion + .tt-suggestion {
  border-top: 1px solid #ccc;
}

.example-twitter-oss .my-field-2 {
  float: right;
  font-style: italic;
}

.example-twitter-oss .my-field-1 {
  font-weight: bold;
}

.example-twitter-oss .my-field-3 {
  font-size: 14px;
}

Node.js, express.js & hogan.js: partials not loading correctly after second refresh

I have an express 3 application running good, but there is something going wrong when i refresh the site for the second time.

var x = {footer:"footer", header:"header"}

exports.index = function(req, res){

    res.render("index.html", {jow: "ieps", partials:x})

}

When i go to my site for the first time then all is fine and all partials render great.

But when refreshing i have this error:

Error: ENOENT, open '/Users/kevinvanhove/Documents/work/projects/basing/business/klanten/javascript/nodeJS/express/basing/views/<h2>wow</h2>.html'

However, when removing the x variable and adding the object literal directly to the res.render parameter list all works fine again.

exports.index = function(req, res){

    res.render("index.html", {jow: "ieps", partials:{footer:"footer", header:"header"}})

}

UPDATE: index.html view

{{> header}}
<h1>jow en {{jow}}</h1>
{{> footer}}

See this vine for a quick overview:

https://vine.co/v/M7BYi75pdrh

Some insight would be greatly appreciated, thank you.

Hogan doesn't support lambda in precompiled mode

I have a mustache template with a lambda looking like this:

{{#myfunc}}myvalue{{/myfunc}}

It is precompiled by hogan.js to look like this:

define(['hogan'], 
function (Hogan) {
    var template = new Hogan.Template(function (c, p, i) {
        var _ = this;
        _.b(i = i || "");
        if (_.s(_.f("myfunc", c, p, 1), c, p, 0, 11, 18, "{{ }}")) {
            _.rs(c, p, function (c, p, _) {
                _.b("myvalue");
            });
            c.pop();
        }
        return _.fl();;
    });
    return function (context, partial, indent) {
        return template.render(context, partial, indent);
    };
});

I render the template using a Marionette.ItemView passing the lambda function into the Backbone.Model like this:

myfunc: function (key) { console.log("key", key); }

The weird thing: The function myfunc will be called and log to the console but it isn't passed a key by the template. I read about Hogan not supporting Lambda in precompiled mode (about a year ago - i guess this is fixed) - but if so how does it happen, that myfunc is called at all?

I put some debugging into my vendor/hogan.js lib - it looks like hogan cannot see the value between lambda-tags (here: myvalue).

Anyone seen this before?

how to have grunt task render mustache partials to static HTML

Background

I've been using grunt.js with a hogan.js task to build the static HTML for our internal docs. I'm learning JavaScript as I go, but I've gotten the task to work well enough for layouts and pages, but it would really help our workflow to have the hogan task render mustache partials to HTML, as in the example in this gist: https://gist.github.com/4132781

Current Setup and what I want to accomplish

All of our mustache partials are in a folder called "partials". Ideally when the grunt build is run, the hogan task will grab any partials from the partials folder and insert them into the HTML wherever they are referenced (also, shown in gist).

What I DON'T want

I don't want to have to define each partial in the task or task configuration. This won't work, we have ~200 partials and growing, so we need to have the task scan a folder and grab partials based on either file name or something. I also don't want to use a different language or build tool. We've used Jade, some markdown-based docs builders, a number of others. If we can just get partials to render as described we'll be in great shape!

Is it possible to accomplish this? Thanks in advance for any feedback

JavaScript templating

I was trying to convince a fellow co-worker into using Mustache/Hogan in the front-end of a project and I proposed the following:

Having a templates.js file, which could roughly look like this:

var tpl_alert = '<div class="alert">{{msg}}</div>';
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>';
...

Then, we would include templates.js and use the corresponding tpl in the Mustache/Hogan.js rendering.

My proposal was turned down, since we're hardcoding html templates into js variables. Is this really that bad? Which are other alternatives to this?