CODEWITHSUNDEEP
node.jsmustache
G33k Labs
G33k Labs

Reputation: 350

How to ignore tags with MustacheJS

I am currently facing a problem with MustacheJS templates by trying to build widgets modules.

In facts, I use my html templates twice :

But the problem is that as vars are empty on server side, template html is not rendered on client side...

<!-- Rendered on server side -->
<div class="content noise">
    <h4>{{widget.title}}</h4>
    <p>Issues from {{widget.github.author}}/{{widget.github.repo}}</p>
    <div class="issues"></div>
</div>

<!-- I want to render this only on client side -->
<script type="text/template" id="issueTemplate">
{{#links}}
    <a href="{{url}}" {{#selected}}class="Selected"{{/selected}}>{{{name}}}</a>
{{/links}}
</script>

Here issueTemplate is empty, as {{links}} is empty on server side.

On client side, I try something like this, and replacing "{{" tag by "[[", but it doesn't have effects :

self.mu = _.clone(Mustache) ;
self.mu.tags = ['[[', ']]'] ;

So do you have an idea about how to ignore tags from rendering, 'script' for example?

Upvotes: 4

Views: 2351

Answers (2)

Faber
Faber

Reputation: 25

Probably it's not the best solution, but if you replace on Server Side with the correct value it works. I.E. 

{{#links}}
{{/links}}

you want to ignore on server side, create element

{{Sublink}}
{{ClSublink}}

on server side replace the value with "link" like this 

Sublink = {{#link}}
ClSublink = {{/links}}

And it works, for me the use of triple brace won't work :(, but in this manner works great.

Upvotes: 0

ebohlman
ebohlman

Reputation: 15003

In Mustache you can change tag delimiters on the fly by using a {{= ... =}} tag; you can use this to create literal sections by picking delimiters that don't exist in the literal. Thus you could do something like

<!-- Rendered on server side -->
<div class="content noise">
  <h4>{{widget.title}}</h4>
  ...
<!-- I want to render this only on client side -->

{{={{{ }}}=}}
<!-- Now only triple braces will be interpreted as tags on the server side -->
<!-- Double braces will be passed through literally -->

<script type="text/template" id="issueTemplate">
{{#links}}
...
{{/links}}
</script>

{{{={{ }}=}}}
<!-- Now double braces delimit tags again if you need to do more server-side rendering-->

Upvotes: 15

Related Questions