Javascript 在弹出窗口中为每行返回动态数据

我在尝试将动态数据返回到弹出窗口时遇到问题。例如，如果要参考下面的示例链接，请单击“Williamson”旁边的信息按钮返回“St.Andrews在哪里？”（上一个TerritoryDescription）

下面是一个复制该问题的示例：

这是单击“信息”按钮时启动的showDetails功能：

$(function() {
 $("#grid").on("click", ".info-btn", function showDetails(e) {
        e.preventDefault();
        var grid = $("#grid").data("kendoGrid");
        var wnd = $("#details").data("kendoWindow");
        var dataItem = grid.dataItem($(e.currentTarget).closest("tr[data-uid]"));    

        var subItem = dataItem.Territories[0];
        console.log(subItem);    

        detailsTemplate = kendo.template($("#view").html());
        wnd.content(detailsTemplate(subItem));
        wnd.center().open();    

        wnd.setOptions({
            title: "Territories"
        });
    });
});

这是showDetails中调用的“视图”模板：

<script type="text/x-kendo-template" id="view">
    <div id="details-container">
        <label><strong>Where is #= TerritoryDescription #?</strong></label>
        <p>#= TerritoryDescription # is in...</p>
    </div>
</script>

地域描述在哪里？
#=TerritoryDescription#位于

最后，以下模板用于显示按钮：

<script type="text/x-kendo-template" id="territoriesTemplate">
  <table cellspacing="0" cellpadding="0" class="resultTable">
    #for(var i = 0; i < Territories.length; i++){#
      <tr>
        <td>
            <a class="hasTooltip">#:Territories[i].TerritoryDescription#</a>&nbsp;
            <button class="info-btn">Info</button>
        </td>
    </tr>
    #}#
  </table>
</script>

#对于（变量i=0；i<0.length；i++）{#
#：地区[i].地区说明#
信息
#}#

---

你知道我如何纠正这个问题吗？

在你的代码中，你正在选择索引[0]

var subItem = dataItem.Territories[0]; // this will always return the first record of the Territories List . 

var index=$(this).closest('td').parent()[0].sectionRowIndex; // Take the index where button 
var subItem = dataItem.Territories[index]; pass the index to the List. 

以下是一个例子：