MVVM and external template

[Jan]

Please help ... 
[1] at the beginning, I create an index.htm file, the template is also defined in the same file.
It works perfectly!!! but the problem is in the second part....

<div id="mydiv">

    <div id="listView" data-role="listview" data-editable="true" data-template="my-template"

         data-bind="source: MySource">

    </div>

</div>

 

<script id="my-template" type="text/x-kendo-template">

    <div>${Status}</div>

    <div>

 

      # if (Status.toUpperCase() == "SINGLE"){#

 

            <img src="imgs/black_acs.png" alt="black_acs image" />

 

      #}else if (Status.toUpperCase() == "MARRIED"){#

 

            <img src="imgs/blue_acs.png" alt="blue_acs image" />

 

       #}else if (Status.toUpperCase() == "OTHER"){#

 

             <img src="imgs/red_acs.png" alt="red_acs image" />

 

       #}#

 

    </div>

</script>

 

<script>

$(document).ready(function ()

            {

        var viewModel = kendo.observable({

           MySource: new kendo.data.DataSource({  // name and status

            transport: {

                      read: {

                        url: "http://xxx.com/REST.VN/AService/GetData",

                        type: "GET",

                        dataType: "json",

                        contentType: "application/json; charset=utf-8",

                        data: function ()

                            {

                                    var jsonParameters = {};

                                jsonParameters.parameter = "XXX";

                                    return jsonParameters;

                            }

                }

             }

        });

 

    kendo.bind($("#mydiv"), viewModel);

});

 

</script>

[2] ... after that, I decide to move the template as external file so that it can be reused by other pages.
I create another file called: template1.tmpl.htm 
This is the content in the file. 

<script id="my-template" type="text/x-kendo-template">

    <div>${Status}</div>

    <div>

 

      # if (Status.toUpperCase() == "SINGLE"){#

 

            <img src="imgs/black_acs.png" alt="black_acs image" />

 

      #}else if (Status.toUpperCase() == "MARRIED"){#

 

            <img src="imgs/blue_acs.png" alt="blue_acs image" />

 

       #}else if (Status.toUpperCase() == "OTHER"){#

 

             <img src="imgs/red_acs.png" alt="red_acs image" />

 

       #}#

 

    </div>

</script>

In the index.html, I create a template loader function as suggested in http://docs.kendoui.com/howto/load-templates-external-files 
on the top of the page: <script src="templateLoader.js"></script>

At the script section, I modify:

<script>

 

$(document).bind("TEMPLATE_LOADED", function (e, data) {

                _itemTemplate = kendo.template($("#my-template").html(), { useWithBlock: false });

                _itemTemplate(data);

                bindMe();

            });

 

$(document).ready(function ()

           {

        templateLoader.loadExtTemplate("template1.tmpl.htm");

            });

 

function bindMe()

{

     var viewModel = kendo.observable({

           MySource: new kendo.data.DataSource({  // name and status

            transport: {

            read: {

            url: "http://xxx.com/REST.VN/AService/GetData",

            type: "GET",

            dataType: "json",

            contentType: "application/json; charset=utf-8",

            data: function ()

                {

                    var jsonParameters = {};

                    jsonParameters.parameter = "XXX";

                return jsonParameters;

                }

            }

         }

    });

 

    kendo.bind($("#mydiv"), viewModel);

}

 

</script>

The result is not showing at all.....
I thought it is not loading the template, so I start debugging. The template is loaded.
(I won't think it is a data issue because it works fine when the template is on the same file.)


Then .... I think something might not correct in the template definition... (it should work fine since it works when template is on the same file)

I removed every thing from the template file:

<script id="my-template" type="text/x-kendo-template">

    <div>fixed text</div>

</script>

This time ... it works with fixed text .... !?!? it becomes interesting....

Then, I start adding data to the template
<script id="my-template" type="text/x-kendo-template"> 
<div>${Status}</div> 
</script> 

Guess what !? ... it is not working ...
After trying ....
<script id="my-template" type="text/x-kendo-template"> 
<div>${data.Status}</div> 
</script> 
It works.... I am able to get the list of Status.

Why do we have to use "data." in the template (external template file)? Previously, the template is defined in the same file, I don't have to put .data in front of field name.
 
Now... conditioning ..
If I remove .toUpperCase(), it works. but I NEED to use the function (and other functions) in the if-else statements.
Since the data can be SiNgle, sinGLE etc.
Why it is not working when I exclude the template from the original file? 
<div>
                  # if (data.Status.toUpperCase() == "SINGLE"){#
                        <img src="imgs/black_acs.png" alt="black_acs image" />
                  #}else if (data.Status.toUpperCase() == "MARRIED"){#
                        <img src="imgs/blue_acs.png" alt="blue_acs image" />
                  #}else if (data.Status.toUpperCase() == "OTHER"){#
                         <img src="imgs/red_acs.png" alt="red_acs image" />
                  #}#
        </div> 


Please help ....

[Todd]

Hello Jan-

Thanks for the question. Sorry about the trouble with external template loading.

There was a small error in the documentation page you referenced that incorrectly showed the template data being passed to the "TEMPLATE_LOADED" event. That should show that the path to the loaded template is passed to the TEMPLATE_LOADED event (which can be used to determine which template has been loaded). This means that the following line is not needed (and won't work properly):

_itemTemplate(data);

We've corrected the docs and will push this change shortly. Thank you for bringing this error to our attention.

The situation you experienced with "data." prefixes in your template is actually related to this line in the template loader snippet you used:

useWithBlock: false 

When "useWithBlock:false" is used, you significantly improve your app's performance (see this blog post), but you also must use the "data." prefix in your templates. If you'd prefer to have the more convenient syntax, you should be able to simply change "useWithBlock" to true and omit the "data." prefixes. This is unrelated to internal/external templates.

Finally, it's not clear to me yet why the toUpperCase is not working for you. Can you apply these changes and then confirm that toUpperCase is still a problem? We'll tackle that next.

Thanks!
-Todd

[Jan]

Thank you. It works now.