javascript - 嵌套在 Kendo 网格中时如何重新加载 Kendo TabStrip 选项卡

Question

我有以下网格，其中有一个嵌套的 TabStrip，用于编辑一个人的不同方面。这些字段在选项卡之间相互关联，因此我需要它们在切换选项卡时自动重新加载，这不是默认行为。

@(Html.Kendo().Grid<PersonModel>()
         .Name("PersonGrid")
         .ClientDetailTemplateId("PersonTemplate")
Blah…
Blah…
Blah…
)
<script id="PersonTemplate" type="text/x-kendo-template">
         @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=Id#")
            .Items(items => {
                     items.Add().Text("Contact Information").LoadContentFrom("PersonInfo", "People", new {personId = "#=Id#"}).Selected(true);
                     items.Add().Text("Incident History").LoadContentFrom("PersonIncidents", "People", new {personId = "#=Id#"});
                     items.Add().Text("Edit Qualifications").LoadContentFrom("PersonQualifications", "People", new {personId = "#=Id#"});
            })
            .Events(e => e.Activate("reloadTab"))
            .ToClientTemplate()
         )
</script>

如果 TabStrip 没有嵌套在网格中，我会为 Activate 事件使用以下脚本。

<script type="text/javascript">
    function reloadTab(e) {
        $('#TabStrip').data('kendoTabStrip').reload(e.item);
    }
</script>

我曾尝试将 JavaScript 嵌套到脚本模板中，但无济于事。

如有任何帮助，我们将不胜感激!

Answer 1

您偶然发现了一个非常棘手的问题。你可能非常接近。重做您的模板以动态生成事件所需的 JavaScript。

我用 >>> 标记我认为是技巧的两行。

<script id="PersonTemplate" type="text/x-kendo-template">
    <script type="text/javascript">
        function reloadTab_#=Id#(e) {
>>>         $('\#TabStrip_#=Id#').data('kendoTabStrip').reload(e.item);
        }
>>> <\/script>
    @(Html.Kendo().TabStrip()
       .Name("TabStrip_#=Id#")
       .Items(items => {
           items.Add().Text("Contact Information").LoadContentFrom("PersonInfo", "People", new {personId = "#=Id#"}).Selected(true);
           items.Add().Text("Incident History").LoadContentFrom("PersonIncidents", "People", new {personId = "#=Id#"});
           items.Add().Text("Edit Qualifications").LoadContentFrom("PersonQualifications", "People", new {personId = "#=Id#"});
       })
       .Events(e => e.Activate("reloadTab_#=Id#"))
       .ToClientTemplate()
    )
</script>

两个反斜杠字符就是诀窍。第一个让 Kendo 在尝试解析动态 jQuery 引用时不会 panic ，第二个让您在完成之前不会关闭模板。

编码愉快!