Question

for some reason I can’t get my head around mustache templating and merging two templates together…

var template = '<div class="thing"><h2>{{head}}</h2><p>{{text}}</p>{{>passwordStrength}}</div>',
    partials = {
        passwordStrength: '<div class="pStrength"><span>{{weak}}</span><span>{{medium}}</span><span>{{strong}}</span></div>'
    },
    view = {
       email: {
           head: 'Email addresses',
           text: 'are very useful if you use them properly...'
       },
       password: {
           head: 'Password',
           text: 'Put in the password of your choice',

           passwordStrength: {
               weak: 'Weak',
               medium: 'Medium',
               strong: 'Strong'
           }

       }
    };

    $.mustache(template, view['password'], partials['passwordStrength']);

The above doesn’t seem to work but its kind of how I’d expect it to. I want to keep all the textual content within the view so that all text is translated here. The passwordStrength ‘partial/template thingy’ I only want for when the password bit is rendered. I’m not quite sure how this is meant to be done. I’ve tried {{#passwordStrength}} {{/passwordStrength}} to think that it would only render if it existed but then you’ve got to pass the partial as well right and thats {{>passwordStrength}}. I don’t want it to appear all the time… only when the content is there as well. Am I doing this all totally wrong?

I guess to say that I only want a template to appear when a condition is met (we’re looking at the password view) then I’m putting logic into my templates which goes against the point of them… but the passwordStrength bit should be within a template so I’m a little confused how this is meant to be handled

Thanks, Dom

Edit: Stackoverflow won’t let me answer my own question and I’m not sure why it wouldn’t allow me to do that so I’ll have to edit my original question with my answer:

I don’t need to use partials… I just need to add the passwordStrength HTML to the original template and wrap it with {{#passwordStrength}}{{/passwordStrength}} so that IF its there (like only in the password view) then it will render the HTML and it will use the text provided in the view. Like so:

var template = '<div class="thing"><h2>{{head}}</h2><p>{{text}}</p>{{#passwordStrength}}<div class="pStrength"><span>{{weak}}</span><span>{{medium}}</span><span>{{strong}}</span></div>{{/passwordStrength}}</div>',
view = {
   email: {
       head: 'Email addresses',
       text: 'are very useful if you use them properly...'
   },
   password: {
       head: 'Password',
       text: 'Put in the password of your choice',

       passwordStrength: {
           weak: 'Weak',
           medium: 'Medium',
           strong: 'Strong'
       }

   }
};

$.mustache(template, view['password']);

Answer 1

You were originally running into problems because you weren’t passing the whole partials object. The partials param should be an object with the key named after your partial and the value with the template.

You are correct in your own answer that you could wrap it with {{#passwordStrength}} to optionally display it if data exists.

I adjusted your original post in a jsFiddle so you can see it working- http://jsfiddle.net/maxbeatty/GQ2Fj/

I separated the HTML out to make the JS easier to read:

<script type="text/html" id="template">
  <div class="thing">
    <h2>{{head}}</h2>

    <p>{{text}}</p>

    {{>passwordStrength}}
  </div>
</script>

<script type="text/html" id="passwd">
  {{#passwordStrength}}
    <div class="pStrength">
        <span>{{weak}}</span>
        <span>{{medium}}</span>
        <span>{{strong}}</span>
    </div>
    {{/passwordStrength}}
</script>

The JS is almost identical besides passing the entire partials object:

var template = $('#template').html(),
partials = {
    passwordStrength: $('#passwd').html()
},
view = {
    email: {
        head: 'Email addresses',
        text: 'are very useful if you use them properly...'
    },
    password: {
        head: 'Password',
        text: 'Put in the password of your choice',

        passwordStrength: {
            weak: 'Weak',
            medium: 'Medium',
            strong: 'Strong'
        }

    }
},
html = Mustache.render(template, view['password'], partials);

document.write(html);