来自远程模板的 kendo ui 网格可编辑弹出窗口答案

【问题标题】：kendo ui grid editable popup from remote templates来自远程模板的 kendo ui 网格可编辑弹出窗口
【发布时间】：2016-11-08 09:34:07
【问题描述】：

我正在尝试为 angular app 中的网格可编辑弹出窗口加载 html 模板。

在我添加的html页面中

<script>

    var templateLoader = (function($,host){
        //Loads external templates from path and injects in to page DOM
        return{
            loadExtTemplate: function(path){
                var tmplLoader = $.get(path)
                .success(function(result){
                    //Add templates to DOM
                    $("body").append(result);
                })
                .error(function(result){
                    alert("Error Loading Templates -- TODO: Better Error Handling");
                });

                tmplLoader.complete(function(){
                    $(host).trigger("TEMPLATE_LOADED", [path]);
                });
            }
        };
    })(jQuery, document);

    /*
    ** Load the template file
    */
    templateLoader.loadExtTemplate("tpl/Maintenance/policyProp.htm");


    /*
    ** Loading external templates with in this function.
    */


</script>

在网格内：

            editable: {
                confirmation: true,
                mode: "popup",
                template: kendo.template($("#Policy_editor").html())
            },

htm 页面：

<script type="text/x-kendo-template" id="Policy_editor" >
html code here 
.
.
.
.
</script>

我希望“#Policy_editor”来自外部 html 页面。感谢您的帮助！

【问题讨论】：

标签： javascript angularjs kendo-ui kendo-grid kendo-template

【解决方案1】：

就我个人而言，我会对您的代码进行一些更改。它将内容附加到正文中，这不是您想要的。您需要在 javascript 标记内附加内容。您使用的 sn-p 只不过是 jQuery 的 $.get() 方法的包装器，但它不允许您决定如何处理请求结果。您需要对其进行更改以使其正常工作：

向请求包装器添加回调：

loadExtTemplate: function(path, successCallback) {
                                ^ this parameter here

然后

.success(function(result){
    if (successCallback) {
        successCallback(result); 
    }
 })

现在有了回调集，您必须在其中创建网格：
```
 templateLoader.loadExtTemplate("tpl/Maintenance/policyProp.htm", function(templateHtml) {
     $("#grid").kendoGrid({
     ....
       editable: {
         confirmation: true,
         mode: "popup",
         template: kendo.template(templateHtml)
       },
    });
 });
```
为什么会这样？因为您可以在网格初始化之后将远程 html 附加到 javascript 标记。由于它是一个异步请求，在网格初始化的那一刻模板标签将为空，因此小部件将为您的列设置一个空模板。您需要在请求完成后创建网格才能获取 html 模板内容。由于您已经在回调中创建了网格，因此无需将其内容设置为标签，只需使用 templateHtml 本身，它应该包含模板 html。

如果您不能或不想在该回调中创建网格，您可以尝试在请求完成时更改其选项，因为小部件已经创建。您可以使用setOptions()，但我不推荐最后一个选项，我没有很好的经验尝试在初始化后更改剑道小部件的选项。

【讨论】：