CODEWITHSUNDEEP
jquerypartialsmustache
Salman
Salman

Reputation: 2139

Nested partials in mustache and loading partials from external file

i have one burning question here

is it possible to nest a partial in another partial this is what i am trying to do

-----------
index.html:
-----------
<html>
<head>
 <script src="jquery.js"></script>
 <script src="mustache.js"></script>
 <script src="javascript.js"></script>
 <script src="json1.js"></script>
 <script src="json2.js"></script>
<head>
<body>
<div id="mustacheContainer"></div>
</body>
<html>

--------------
test.mustache: (this file contains main template and partials)
--------------
<script id="tpl-one" type="text/html"><!--main template -->
{{fname}}
{{> tplThree}}
</script>

<script id="tpl-two" type="text/html">
{{lname}}
</script>

<script id="tpl-three" type="text/html">
{{> tplTwo}}
</script>

---------
json1.js:
---------
var user={
 fname:'joe',
 lname:'blogs',
}

---------
json2.js:
---------
var translations={
 someword:'its translation'
}

-------------------
javascript.js file:
-------------------
;$(function () {
    $.get('test.mustache', function(templates) {
        var template = $(templates).filter('#tpl-one').html();
        $.extend(json1,json2);
        var three = $(templates).filter('#tpl-three').html();
        three = {"tplThree": one};
        var html = Mustache.to_html(template, json1, three);
        $('#confirmationMustacheContainer').html(html);
    }, "html");

});

Now the Question why is this not working? what am i doing wrong, is this context issue or nesting is not supported in mustache, is there any way to do this? using jquery, and how can i load partials from external files?

these are lot of question i hope someone can answer as it will help many users i will give 5 ups for this one :)

thanks

Upvotes: 1

Views: 3128

Answers (2)

imoverclocked
imoverclocked

Reputation: 308

I was looking to do something similar and wrote a quick function to take an arbitrary template file and generate an appropriate partials variable:

  var partials = {};
  $.ajax({
    'url': '/templates/common.mustache',
    'async': false,
    'success': function( template_partials ) {
      $(template_partials).filter( 'script' ).each(function(index,piece) {
        partials[piece.id] = piece.innerHTML;
      })
    }});

  var html = $.mustache(template, jsonData, partials)
  $("div.content").html(html);

This may also help to clean up and generalize your code a little.

Upvotes: 0

maxbeatty
maxbeatty

Reputation: 9325

All you really need to do is clean up your variables and properly form your partials object. json1 and json2 are not defined and should be user and translations respectively. You're overwriting the three template with what looks like your partial object that references an undefined one.

Your partial object needs to have the template names as keys (i.e. tplTwo) and the partial text as the value (i.e. {{lname}}).

Here's the cleaned up code:

// json1.js
var user = {
    fname: 'joe',
    lname: 'blogs',
}
// json2.js
var translations = {
    someword: 'its translation'
}

$.get('test.mustache', function(templates) {
    var json = $.extend(user, translations),
        one = $(templates).filter('#tpl-one').html(),
        three = $(templates).filter('#tpl-three').html(),
        two = $(templates).filter('#tpl-two').html(),
        partials = {
            "tplThree": three,
            "tplTwo": two
        };

    var html = Mustache.to_html(one, json, partials);
    $('#mustacheContainer').html(html);
}, "html");

This outputs the expected "joe blogs" as​ demonstrated in this jsFiddle

Upvotes: 2

Related Questions