Provide some kind of External Template Loading

[mgiacomi]

Hi Henrik,

I had posted this as a comment to a closed post, but thought I would open it as it's own post.

I understand that you don't want to push people in one direction or another with respect to remote template loading, but there might be a bigger picture here that you should consider. For example what about those of us using your framework on mobile phones. In frameworks like phonegap it is a benefit to have the whole app be a single page. In my case I end up with a index.html page with 50+ templates in it. My app does not connect to a server so I can point to a local json file that I have to encode by hand (manually embedding HTML in json sucks!). It works, but it is not pretty. It would be much easier if the framework allowed me to point to a files that included all of my templates in pure text format. This way I could put all 50+ in one file, or break them up by module.

I'm not saying I like the current proposed solutions for remote loading, but I think something that takes us SPI (http://en.wikipedia.org/wiki/Single-page_application) and SPI standalone and mobile developer into consideration would be nice.

Just my 2 cents...

[HenrikJoreteg]

I use this primarily in single page applications myself. In one app i even send the templates over websockets just to avoid cluttering up the app html. I agree that this is valid, the problem is, I don't think want to make the decision on how to load your templates for you.

What solution would you propose? It seems like you could generate the JSON file for your app with a script and then load them as needed. I'm just not sure what ICH could do to help that.

Please help me understand.

[mgiacomi]

Sounds like you are developing SPA's that are connected to the web. In that case JSON or Websockets are ok, but things become a little more messy when using your framework (which I like very much) inside an SPA running locally on the mobile device that does not connect to a web server. In this case the app is only able to run get requests against local files packaged with app. As best as I can tell, I'm only left with 3 options.

1. Put all my temples in index.html. My app is quite large, so this becomes a mess quickly.

2. Encode my templates into JSON by hand, package them with my app, and load them via the example on your website for remote templates. If you have ever tried to manually escape complex html in a JSON file by hand, you will see how this get's ugly fast. (I agree this works great when you are loading from a server and can just run a json_encode on an object that you read from the file system, but again this is not an option when running in a mobile or non-connected device)

3. Enocde my templates in XML and write code to load them in index.html. This is what I have done. The only difference between this and option 2 above is that manually encoding HTML in CDATA tag is far easier then manually escaping HTML in a JSON file.

For now I'm using the following code:

    var templateURLs = new Array(
        'templates/header.html',
        'templates/main.html',
        'templates/navigation.html',
        'templates/itinerary.html',
        'templates/flights.html'
    );

    $(document).ready(function () {
        for (var i = 0; i < templateURLs.length; i++) {
            $.ajax({
                type: "GET",
                url: templateURLs[i],
                dataType: "xml",
                success: function(xml) {
                    $(xml).find("script").each(function() {
                        ich.addTemplate($(this).attr('id'), $(this).text())
                    });

                    loadedTemplates++;
                    if(loadedTemplates == templateURLs.length) {
                        startApp();
                    }
                },
                error: function(xhr,err){
                    alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status +"\n"+ err);
                }
            });
        }
    });

Then my template files look something like:

<script id="template1" type="text/html"> </script> <script id="template2" type="text/html"> </script>

Maybe this is the best I can hope for, but it feels like a hack.

I have talked with a few others that I know who are using your framework and we need the same thing; just a simple way to load external templates. They don't need to be dynamic, there is no reason for them to have to be encoded by an server based application. The templates just need to be scoped up with a simple get. Why would you want to "generate the JSON file for your app with a script then load them..."? Seems like unnecessary work when all that is needed is to grab a set of templates.

Something simple like:

ich.addExternalTemplate('/url/to/template');

would be all that would be needed in the API. The file that you load could be an HTML fragment. The format could be very simple. For example:

HTML CODE HERE HTML CODE HERE

It would give people a very powerful tool to have external templates without having to create their own loader every time.

[mgiacomi]

Then my template files look something like:

<html>
<head>
<script id="template1" type="text/html">
<![CDATA[
HTML CODE HERE
]]>
</script>
<script id="template2" type="text/html">
<![CDATA[
HTML CODE HERE
]]>
</script>
</head>
</html>

Maybe this is the best I can hope for, but it feels like a hack.

I have talked with a few others that I know who are using your framework and we need the same thing; just a simple way to load external templates. They don't need to be dynamic, there is no reason for them to have to be encoded by an server based application. The templates just need to be scoped up with a simple get. Why would you want to "generate the JSON file for your app with a script then load them..."? Seems like unnecessary work when all that is needed is to grab a set of templates.

Something simple like:

ich.addExternalTemplate('/url/to/template');

would be all that would be needed in the API. The file that you load could be an HTML fragment. The format could be very simple. For example:

<templates>
<template name="myTemplateName1">
HTML CODE HERE
</template>
<template name="myTemplateName2">
HTML CODE HERE
</template>
</templates>

It would give people a very powerful tool to have external templates without having to create their own loader every time.

***Sorry only half of my took the first time, so I had to post in two parts.

[HenrikJoreteg]

You could still do that:

$.get('/url', function (response) {
    $('template', response).each(function () {
        ich.addTemplate(this.id, $(this).text());
    });
});

I see no reason for ICH to make this decision for you.

[HenrikJoreteg]

As this can be done any number of ways, I'd prefer not to make that decision. Closing for now.