Accessing Template Loop Index

[Ashleigh L]

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>

 

[Boyan Dimitrov]

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

 

 

[Ashleigh L]

Alright, thanks.