Unusual template behavior

[Evan Hutnick]

Hey folks,

I was wondering if you might be able to explain why templates are behaving the way they are in our application since I'm a little lost on what is going wrong.  Using v2013.1.307, we are using the Routing component as well as Kendo Templates to create a SPA interface.  

With this in mind, we load the main views using a listview and templated li's, which works like a charm.  Everything loads and template data and inline script works as intended (alert is fired):

<li class="clearfix">
    <a href="\#/project/#: data.Id #">
        #
        var leadPhoto = data.parent().parent().photoFileNameForLead(data);
        alert("pl");
        if (leadPhoto) {#
            <img class="team-lead" data-bind="attr: {src: photoFileNameForLead}" />
        #} else {#
             <div class="team-lead icon-user">No Lead</div>
        #}#
        <header>
            ...
        </header>
    </a>
</li>

However, when clicking into the details for an item, the same exact template code appears as inline text within the html, so the template never gets picked up:

<article>
    <div class="resource-info">
        ...
    </div>
    <div class="resource-projects">
        <h3>Current Projects</h3>
        <ul data-bind="source: getProjectsForActiveResource" data-template="resource-details-project"></ul>
        #
        alert("new resource");
        var leadPhoto = data.parent().parent().activeResource;
        if (leadPhoto) {#
            <img class="team-lead" data-bind="attr: {src: photoFileNameForLead}" />
        #} else {#
             <div class="team-lead icon-user">No Lead</div>
        #}#
    </div>
    <button data-bind="click: saveActiveResource" class="save-button">Save</button>
</article>

So rather than seeing a distinct photo/decorate div and getting an alert, this just gets written directly into the document.

Is there a different behavior that we need to use in order to get these inline templates working in different scenarios?  The only difference I can see is that the second snippet is being loaded via the router > return a view, meanwhile the original <li> is being loaded by a Kendo component as individual templated items.  

Thanks!
-Evan

[Petyo]

Hello Evan,

If I understand you correctly, you are applying the second snippet as the contents of a kendo.View. Its contents are not treated as a kendo template - you should use MVVM in that case.

Regards,
Petyo
the Telerik team

[Evan Hutnick]

Hey Petyo,

As it turns out we ended up going that route regardless.  We merged two views and were able to grab, populate, and inject existing templates into our page using the examples from the documentation.  For reference, here's the section I'm talking about:

http://docs.kendoui.com/getting-started/framework/templates/overview#internal-vs.-external-templates

We're using the same method to populate (or not, in some cases) the details div with a formatted template.  Works like a charm! :)

-Evan