If you use mustache templates you will thank me for this.

OK, after reading billions of articles about template-ing in Mustache i found out that none had what i exactly was looking for.
My main goal was to load an external template and use a web service in order to iterate through the data and present the output to the DOM. Well tough luck my friends. Everything scattered here and there, not a clue on some examples on where you bind your HTML and the most important part, no example whatsoever on how to integrate your template into mustache, WHENEVER YOU FELT LIKE IT! I mean, give me a break here, i had to do this myself with all these examples?!
Anyhow.
So here is a clear explanation on a very simple web call using mustache:
(you need to import Jquery and mustache.js to the markup)
I need an external template so i created a htm file in a folder (templates/template.htm). Now inside the file i create a simple template with one h1 element:

Code:

---

<script id="tpl-news" type="text/html">
        <h1>{{myheader}}</h1>
</script>

---

The tpl-news is the name we need in order to call the template afterwards, any name is fine.
Now we have the file with the template.
So how the heck can i import it in the markup and have it stand by?This is how:

Code:

---

<script type="text/javascript">
    $(document).ready(function () {

  //need to syncronize the result JQuery.$get
        var mytemplate = GetResultTemplate('templates/template.htm');
    // now you have your template ready

});

---

now let's see the function GetResultTemplate on Javascript (do not put it on (document).ready(function... )

Code:

---


    function GetResultTemplate(name) {
        var result = null;
        var scriptUrl =  name;     
        $.ajax({
            url: scriptUrl,
            type: 'get',
            dataType: 'html',
            async: false,
            success: function (templates) {
                var mytemplate = $(templates).filter('#tpl-news').html();
                result = mytemplate;
            }
        });
        return result;
    }

---

So what, you will say. What is all the fuss. Well the fuss is that if you don't declare the .get an syncronous will never,ever,ever,ever get anything outside the .Get function, so you are bound to do everything in .Get, including all the template loading and data. Well i DO NOT WANT THAT!100 examples and no solution.So use the above to have the template on stand by.

OK, the rest is relatively easy, although most of the examples will leave you wondering where you render the data in markup.
So, we call a web service (Used WCF) and Json it(will leave that to you). So we now get the Web Service data:

Code:

---

  $.ajax({
            type: "POST",
            url: "Servicenews.svc/returnews",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {           
                try {
                    var oRetVal = response.d;
                    $.each(oRetVal, function (index, news) {
                       
                //we have rendered it in an external file now so the below is useless..                                                                       
                    //    var template2 = "<h1>{{myheader}}</h1>";
                  //      var html = Mustache.to_html(template2, news);
                  //      $('#sampleArea').html(html);

                        output = Mustache.render(mytemplate, topnews);

                        //append the HTML template to the DOM
                        $('#sampleArea').append(output);                                   

                    }
                )
                }
                catch (ex) { alert(ex) }
            },
            failure: function (msg) {
                alert(msg);
            }
        });

---

Here i have left on comments, what needed to be done before.We had to manually create the template and html it. The big plus on external files is that we can decorate them in the usual editor not worrying about manual markup to Javascript them. Of course the big plus for me is that i have already loaded my template without having to do everything on the .Get .I do the load whenever i feel like.
And now the #sampleArea part. Believe it or not, not many examples explained how you can bind your finished html to your markup. Simply enough you declare an Id on a div , span , paragraph, what container you feel like and give the id the name="#sampleArea". SampleArea can be any name you like.
So for example i have it rendered on a <p> element:

Code:

---

<p id="sampleArea"></p>

---

Also do note that with $('#sampleArea').append(output); you actually bind every new Json object that comes in. It is important because if you just do as suggested on the comments I've left on the javascript you will only get the last element.Believe it or not a very few examples explained it.At first i thought that you can pass the entire response.d Json object but i ended up with a nice animation that iterated on every row and showed the last one.
So anyhow be real careful in using custom JS templates because the documentation is very poor and if you get stuck in something there is no help whatsoever. You have to be lucky enough to find someone that used the template. So in this forum i'm guessing 1-2 people tops(?).
That's it, i don't expect many people to use this but after the frustration i got from the examples, I just wanted to share so no one else has to go through on what i went through to get the damn thing to work (and i haven't even CCS'ed my template, let's hope it can be done correctly or the template will be useless to me).