javascript - 如何实现模块化细节-老版本KendoUI Grid模板

Question

好的，一些背景知识。我们处于 Angular/Kendo 环境中。但是，我们使用的是 2014 年第 2 季度的较旧版本的 KendoUI。这是什么意思？

• 这意味着，如果我们想将详细信息模板与 Kendo-Grid 一起使用，那么我们不能使用新的 Angular 指令 k-detail-template。如果我们使用它，那么它无法正确呈现为 Kendo 模板，正如在此 Dojo http://dojo.telerik.com/oMEvI/6 上所示。 。如您所见，如果我们选择较新的库，则支持详细信息模板，但不支持较旧的库。然而，我们现在没有能力更新我们的 Kendo 库，因此我们需要找到一个替代方案来替代我们拥有的旧学校库。
• 现在，我们的解决方法是按照经典 JQuery 中的使用方式来使用它，如 Dojo 中所示:http://dojo.telerik.com/otiqU

它有效，到目前为止一切顺利。然而，它本质上不是模块化的，它要求我在 Controller 中包含 HTML 模板，这不是最优雅的方法(至少在我看来)。我的问题是我怎样才能拥有下面的模板:

 detailTemplate: "<b>This is where all the details go</b>",

不是内联分配，而是来自单独的 HTML View ，这样它就不会在我的 Controller 中散布不需要的 html？

Answer 1

我想到了两件事。

 detailTemplate: kendo.template($("#myTemplate").html()),

或者

clientTemplateID="tmpGridViewItem",


<script type="text/x-kendo-tmpl" id="tmpGridViewItem">
    <div class="gridViewItem">
        <h3>#:ModelFieldValue#</h3>
    </div>
</script>

或者

 var templateContent = that._templates.divA;
 var template = kendo.template(templateContent);
 ...

 _templates: {
                divA: "<div style='position:absolute;'> <img src='#=data.imageUrl#' alt='Help' ></img></div>",
                divB: "<div style='position:absolute; ><img class='k-button' src='#=data.imageUrl#' alt='Help' ></img></div>"
            }