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

我正在尝试在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>

htm页面：

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

这里是html代码
.
.
.
.

我希望“#策略编辑器”来自外部html页面。

---

谢谢你的帮助

就我个人而言，我会对你的代码做一些修改。它将内容附加到正文中，这不是您想要的。您需要将内容附加到javascript标记中。您正在使用的代码片段与jQuery的

$.get（）

方法的包装完全不同，但它不允许您决定如何处理请求结果。您需要更改该选项以使其正常工作：

向请求包装器添加回调：

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

然后

现在，使用回调集，您必须在其中创建网格：

 templateLoader.loadExtTemplate("tpl/Maintenance/policyProp.htm", function(templateHtml) {
     $("#grid").kendoGrid({
     ....
       editable: {
         confirmation: true,
         mode: "popup",
         template: kendo.template(templateHtml)
       },
    });
 });

为什么会这样？因为您可以在网格初始化之后将远程html附加到javascript标记。由于它是一个异步请求，在网格初始化时，模板标记将为空，因此小部件将为您的列设置一个空模板。您需要在请求完成后创建网格，以便获取html模板内容。由于您已经在回调中创建了网格，无需将其内容设置为标记，只需使用

templateHtml

本身，它应该包含模板html

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

---

就我个人而言，我会对你的代码做一些修改。它将内容附加到正文中，这不是您想要的。您需要将内容附加到javascript标记中。您正在使用的代码片段与jQuery的

$.get（）

方法的包装完全不同，但它不允许您决定如何处理请求结果。您需要更改该选项以使其正常工作：

向请求包装器添加回调：

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

然后

现在，使用回调集，您必须在其中创建网格：

 templateLoader.loadExtTemplate("tpl/Maintenance/policyProp.htm", function(templateHtml) {
     $("#grid").kendoGrid({
     ....
       editable: {
         confirmation: true,
         mode: "popup",
         template: kendo.template(templateHtml)
       },
    });
 });

为什么会这样？因为您可以在网格初始化之后将远程html附加到javascript标记。由于它是一个异步请求，在网格初始化时，模板标记将为空，因此小部件将为您的列设置一个空模板。您需要在请求完成后创建网格，以便获取html模板内容。由于您已经在回调中创建了网格，无需将其内容设置为标记，只需使用

templateHtml

本身，它应该包含模板html

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