Unusual template behavior

3 posts, 0 answers
  1. Evan Hutnick
    Evan Hutnick avatar
    26 posts
    Member since:
    Sep 2008

    Posted 14 Mar 2013 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Evan Hutnick
    Evan Hutnick avatar
    26 posts
    Member since:
    Sep 2008

    Posted 15 Mar 2013 Link to this post

    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
Back to Top