Question

我正在尝试在角度应用中加载网格可编辑弹出窗口的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()方法的包装器，但它不会让您决定如何处理请求结果。您需要更改它才能使其正常工作：

向请求包装器添加回调：

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

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

1 个答案: