javascript - kendo ui 网格可从远程模板编辑弹出窗口

Question

我正在尝试加载 Angular 应用程序内网格可编辑弹出窗口的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 页面。感谢您的帮助!

Answer 1

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

1. 向请求包装器添加回调:

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

   然后

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

2. 现在设置了回调，您必须在其中创建网格:

    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()但我不推荐最后一个选项，我没有很好的经验在初始化后尝试更改剑道小部件的选项。