EzDevInfo.com

Braces Handlebars.js not interpreted

I'm using Handlebars.java for templating on the server side and Handlebars.js for templating on the client side,

I would like to have <script id="wr-tpl" type="text/template"> NOT interpreted by the server (Handlebars.java) but interpreted only by the client (Handlebars.js).

The flow is that I get a JSON object from the server successfully (after the page rendered) and send it to my Handlebars.js Template that should populate the retrieved data.

this is my template :

<script  id="wr-tpl" type="text/template">
    <div id="wp-{{data.uuid}}">
        <div class="thumbnail">
            <h3>{{data.name}}</h3>
            <div class="thumbimg">
                <a rel='nofollow' href="/profs/{{data.uuid}}">
                    <img alt="" src="//static.images.com/img/users/profile/{{data.cover}}" class="img-responsive" />
                </a>
            </div>
            <div class="caption">
                <div style="overflow: hidden;">
                    <p class="namelabel">{{data.name}} </p>
                    <p class="descriptionlabel">{{data.description}}</p>
                </div>
            </div>
        </div>
    </div>
</script>

my JS code after receiving the response from server :

var source   = $("script[type='text/template'][id='wr-tpl']").html ();
var template = Handlebars.compile (source);
var data     = {};
data.data    = responseJSON;
var html     = template(data);
$(container).append(html);

and the output is somehow unpredictable :

sometimes when I add \ before {{data.uuid}} it works on one location of the template sometimes not, and I can clearly see that the expression between 2 braces is not rendered and interpreted.

Do you have any insight about this ?

Thank you.

Needed aggregate handlebar template before compilation

We have a requirement where we want to merge the inline template in the parent template before proceeding for the parent template compilation using HandleBar jknack in Java using handlebar.compile(TemplateSource).

We want to store the complete compiled template in cache for further processing.

Scenario We have a carousel template like

    {{#each carousel.slides}}
        {{#if panel.image}} image {{else}} video {{/if}}
            {{#if panel.image}}
                {{include this "panel/displayAs_imagePanel.hbss" }}
            {{else}}
                {{include this "panel/displayAs_videoPanel.hbss" }}
            {{/if}}  
    {{/each}}

inside the template we are having a inline Helper as {{include this "panel/displayAs_imagePanel.hbss" }}

We want merge or embedded the 'panel/displayAs_imagePanel.hbss' inside parent template before compiling.

Handlebars: Partials vs Helpers For Templating

We're starting to use Handlebars for the view layer in some of our projects. We are starting to hit a crossroads between two ways of doing some templating. I've been using partials to handle the templating & having small HTML templates like:

<p id="{{name}}">
  <label for="{{name}}Input">{{text}}</label>
  {{#if info}}
    <small>{{info}}</small>
  {{/if}}
  <textarea name="{{name}}" id="{{name}}Input"></textarea>
</p>

Another developer feels that we shouldn't be using partials for this & instead we should be creating helpers for this.

I can see helpers being easier to handle input parameters (as I'm currently using some form of "include" helper to include these partials with some extra variables). But it doesn't sit right with me that you are writing HTML into strings in code - I don't think you're separating your concerns properly there. We are also using Handlebars in Java (via [Handlebars.Java][2]), so again your HTML is very much in compiled code - not in simple to edit view files.

Is there a generally accepted way to handle templating in Handlebars? Partials or Helpers or is there something else I don't know about?

Unexpected token ILLEGAL : how to remove "e; and lines breaks from JSON

I receive a Json from the server when loading a page, and it gets populated in the page using Handelbars.java. Till now everything's fine.

However I would like to get that Json object and store it on a JS object this is where I fail.

When I try to store it on a JS object I do the following :

var jsObject = "{{output.items}}";  // the output.items is the JSON retrieved on the template

I get the following ("e; and line breaks interpreted) :

{
    "profile": {
        "name": "copernic",
        "email": "copernic@cop.com"
    }
    ....
}

When I should get the following (without line breaks interpreted) :

{
    "profile": {
        "name": "copernic",
        "email": "copernic@cop.com"
    }
    ....
}

So it throws me an error on JS Uncaught SyntaxError: Unexpected token ILLEGAL

When printing the json on the HTML template using <pre>{{output}}</pre> it looks just fine.

Do you have any idea about how can I store the Json returned from the server on page loading on a JS object as I don't have much control of it since it's NOT coming with Ajax ?

Thank you.

Comparing 2 strings with Handlebars in Java

I am using Handlebars with Dropwizard in Java. I'd like to compare 2 strings and if the are identically, I'd like to do something. I know there are some Helpers within Javascript, but I don't get how to adapt them to java.

I've this code, but question is, how can I add the second value to check whether they are equal.

public enum StringHelper implements Helper<Object> {
     eq {
         @Override
         public Boolean safeApply(final Object value, final Options options) {
           return ((String)value).equals(/*SECOND VALUE*/);
         }
       };

       @Override
       public Boolean apply(Object context, Options options) throws IOException {
         return safeApply(context, options);
       }

       protected abstract Boolean safeApply(final Object value,
                                        final Options options);
     }
}