Accessing Template Loop Index

3 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 11 Jul 2016 Link to this post

    I've got a template that's displaying comments. There's no loop inside the template itself since I'm letting the datasource handle that. I have a situation now though, where I need to add content to the template on the 50th (for example) iteration of the template. If I had a loop, that would be easy, but I'm hoping to not have to refactor my existing template to manually include one.

    JS:

    function generateDiscussionView(container_id) {
        var template_html = $('#discussion_template').html();  
        var template = kendo.template(template_html, {useWithBlock: false});
         
        discussion_datasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/DiscussionsController.cfc?method=getDiscussion",
                    type: "get",
                    dataType: "json",  
                    data: {
                        ContainerID: container_id
                    }
                }          
            },
            schema : {
                type: "json",
                data: "Comments"
            }
        });
     
        discussion_datasource.bind("change", function() {      
            var view = discussion_datasource.view();
            var html = "";
             
            html = kendo.render(function(data) {   
                return template($.extend(data, {IsAdmin: is_admin, AURID: aur_id}));
            }, view);
             
            $('#discussion_display').html(html);
        });
         
        discussion_datasource.read().then(function() {     
            var data = discussion_datasource.data();   
            data = data[0];
             
            global_container_id = container_id;
        }
    }

    Template:

    <div id="discussion_display" class="list-items-content-area k-listview col-xs-12"></div>
     
    <script id="discussion_template" type="text/x-kendo-template">
        <div class="col-xs-12 disc-comment">
            <div class="disc-nav"><img src="#= data.Photo #" onerror="imgError(this);" title="#= data.Poster #" /></div>
            <div class="overflow-hidden">
                <div id="display_comment_#= data.CommentID #">
                    <p class="blue">#= data.Poster #</p>
                    # var formatted_text = data.Text.replace(/(?:\r\n|\r|\n)/g, '<br />'); #
                    <p>#= formatted_text #</p>
                    <p class="small text-muted">
                        #= data.Created #
                        # if (data.Editable) { #
                            <a href="javascript:;" onclick="editComment(#= data.CommentID #);">Edit</a>
                        # } #
                        # if (data.Editable || data.IsAdmin) {#
                            <a href="javascript:;" onclick="deleteComment(#= data.AURID #, #= data.CommentID #);">Delete</a>
                        # } #
                    </p>
                </div>
                # if (data.Editable) { #
                    <div id="edit_comment_#= data.CommentID #" style="display: none;">
                        <textarea id="comment_#= data.CommentID#" class="form-control input-sm">#= data.Text #</textarea>
                        <a id="add_comment_#= data.CommentID #" class="btn btn-default" data-commentid="#= data.CommentID #">
                            <i class="fa-icon-plus"></i>
                        </a>
                        <a href="javascript:;" onclick="cancelEdit(#= data.CommentID #);">Cancel</a>
                    </div>
                # } #
            </div>
        </div>
    </script>

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1907 posts

    Posted 13 Jul 2016 Link to this post

    Hello,

    I am afraid that there is no built-in way to find the number iteration inside the template. My suggestion is to either: 

      - check for a specific model field value in the template. Lets say that each data item has a id field. Check if the id field of the current data item is 50. 

      - make a JavaScript variable to store the current count and include a logic in the template to increment the counter by one. 

    var counter = 0;
    var template = kendo.template("<li>#: name# #counter ++; console.log(counter);# </li>");
    var data = [ { name: "John Doe" }, { name: "Jane Doe" }];
    var html = kendo.render(template, data);
    $("ul").html(html);

     

    Regards,
    Boyan Dimitrov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 13 Jul 2016 in reply to Boyan Dimitrov Link to this post

    Alright, thanks.
Back to Top