javascript - 在弹出窗口中返回每行的动态数据

Question

我在尝试将动态数据返回到弹出窗口时遇到问题。例如，如果您要引用下面的示例链接，则单击“Williamson”旁边的信息按钮将返回“圣安德鲁斯在哪里？” (之前的 TerritoryDe​​scription)。

以下是复制该问题的示例:
http://jsbin.com/iJunOsa/109/

这是单击“信息”按钮时启动的 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 中调用的“ View ”模板:

<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>

最后，使用以下模板来显示按钮:

<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>

知道如何解决这个问题吗？

Answer 1

在您的代码中，您选择索引 [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. 

这是一个示例:http://jsfiddle.net/chanaka1/to5cn5mn/1/