sapui5 / openui5具有自定义控制列的TreeTable在展开节点时抛出重复的id错误

Question

我有一个sap.ui.table.TreeTable有几列，其中一列包含一个定义为列模板的自定义控件。

TreeTable正确呈现，带有自定义控件的列也可以正确呈现和运行...直到我展开未展开的节点。

当我展开节点时，渲染器会抛出错误 Error: adding element with duplicate id '__link0-col1-row0'，
这是与自定义控件关联的列。

我可以通过添加 attachToggleOpenState 事件处理程序解决此问题，该处理程序会销毁此列模板并再次添加。价格昂贵但有效！

this.oTable = new sap.ui.table.TreeTable("myTable", {
    columns : [ new sap.ui.table.Column( {
        label : "Query",
        template : new sparqlish.control.queryClause({
            clausePath : {
                path : "viewModel>path"
            }
        }),
        visible : true,
        width : "500px"
    }), ],
}).attachToggleOpenState(function(oEvent) {
    // TODO workaround as expanding Tree causes duplicate id
    var queryColumn = oEvent.getSource().getColumns()[0];
    queryColumn.destroyTemplate();
    queryColumn.setTemplate(new sparqlish.control.queryClause({
        clausePath : {
            path : "viewModel>path"
        }
    }))
});

sparqlish.control.queryClause是自定义控件。

我使用的是openui5版本1.28.15

还有其他更便宜的建议吗？

自定义控件采用此形式，但此控件会调用其他控件等。

jQuery.sap.require("sparqlish.control.conceptClause");
jQuery.sap.require("sparqlish.control.propertyClause");
jQuery.sap.require("sparqlish.control.conjunctionPropertyClause");
sap.ui.core.Control.extend("sparqlish.control.queryClause", {
    metadata : {
        properties : {
            clausePath : {
                type : "string"
            }
        },
        events : {},
        aggregations : {
            _conceptClause : {
                type : "sparqlish.control.conceptClause",
                multiple : false
            },
            _propertyClause : {
                type : "sparqlish.control.propertyClause",
                multiple : false
            },
            _conjunctionPropertyClause : {
                type : "sparqlish.control.conjunctionPropertyClause",
                multiple : false
            }
        }
    },
    init : function() {
        var self = this;
        self.setAggregation("_conceptClause", new sparqlish.control.conceptClause());
        self.setAggregation("_propertyClause", new sparqlish.control.propertyClause());
        self.setAggregation("_conjunctionPropertyClause", new sparqlish.control.conjunctionPropertyClause());
    },
    renderer : function(oRm, oControl) {
        if (oControl.getClausePath() != undefined) {
            // TODO no point if path not yet defined
            oRm.write("<div ");
            oRm.writeControlData(oControl);
            oRm.writeClasses();
            oRm.write(">");
            var currentModel = oControl.getModel("queryModel");
            // Set binding context, rather than just the binding path etc, as this seems essential for satisfactory binding of
            // aggregations
            oControl.setBindingContext(new sap.ui.model.Context(oQueryModel, oControl.getClausePath()), "queryModel")
            var currentCtx = oControl.getBindingContext("queryModel");
            var currentContext = oControl.getModel("queryModel").getProperty("", currentCtx);
            if (currentContext != undefined) {
                var sClass = currentContext._class;
                if (sClass == "Query") {
                    oControl.setAggregation("_conceptClause", new sparqlish.control.conceptClause().setBindingContext(oControl.getBindingContext("queryModel")));
                    oRm.renderControl(oControl.getAggregation("_conceptClause"));
                } else if (sClass == "Clause") {
                    oControl.setAggregation("_propertyClause", new sparqlish.control.propertyClause().setBindingContext(oControl.getBindingContext("queryModel")));
                    oRm.renderControl(oControl.getAggregation("_propertyClause"));
                } else if (sClass == "ConjunctionClause") {
                    oControl.setAggregation("_conjunctionPropertyClause", new sparqlish.control.conjunctionPropertyClause().setBindingContext(oControl
                            .getBindingContext("queryModel")));
                    oRm.renderControl(oControl.getAggregation("_conjunctionPropertyClause"));
                } else {
                    jQuery.sap.log.fatal("Incorrect class of provided query clause");
                }
            }
            oRm.write("</div>");
        } else {
            jQuery.sap.log.fatal("clausePath not defined");
        }
    }
});

下面是一个依赖控件的示例。

jQuery.sap.require("sparqlish.control.conceptMenu");
jQuery.sap.require("sparqlish.control.conceptFilters");
jQuery.sap.require("sparqlish.control.addClause");
sap.ui.core.Control.extend("sparqlish.control.conceptClause", {
    metadata : {
        properties : {
            concept : "object"
        },
        events : {},
        aggregations : {
            _concept : {
                type : "sparqlish.control.conceptMenu",
                multiple : false
            },
            _conceptFilters : {
                type : "sparqlish.control.conceptFilters",
                multiple : false
            },
            _addClause : {
                type : "sparqlish.control.addClause",
                multiple : false
            }
        }
    },
    init : function() {
        var self = this;
        var conceptSelect =function(oEvent){

                var currentModel = self.getModel("queryModel");
                var currentContext = self.getBindingContext("queryModel");
                var currentModelData = currentModel.getProperty("", currentContext);
                currentModelData.conceptFilters = [];
                currentModelData.clauses = {};
                var sConcept = oEvent.getParameter("concept");
                var oMetaModel = self.getModel("metaModel");
                var oConcept=oMetaModel.getODataEntitySet(sConcept);
                self.setConcept( oConcept);
                self.oEntityTypeModel = new sap.ui.model.json.JSONModel();
                self.oEntityTypeModel.setData(oMetaModel.getODataEntityType(oConcept.entityType));
                self.setModel(self.oEntityTypeModel, "entityTypeModel");
                self.getAggregation("_conceptFilters").setModel(self.oEntityTypeModel, "entityTypeModel");

                self.getAggregation("_conceptFilters").getAggregation("_extendFilter").setVisible(true);
                currentModel.refresh();
                self.rerender();    
        };
        self.setAggregation("_concept", new sparqlish.control.conceptMenu({
            selected : function(oEvent) {
                self.getAggregation("_conceptFilters").getAggregation("_extendFilter").setVisible(true);
            },
            changed : conceptSelect
        }).bindElement("queryModel>"));
        self.setAggregation("_conceptFilters", new sparqlish.control.conceptFilters().bindElement("queryModel>"));
        self.setAggregation("_addClause", new sparqlish.control.addClause({
            pressed : function(oEvent) {
                alert("concept");
            }
        }).bindElement("queryModel>"));
    },

    renderer : function(oRm, oControl) {
        oRm.addClass("conceptClause");
        oRm.write("<div ");
        oRm.writeControlData(oControl);
        oRm.writeClasses();
        oRm.write(">");
        oRm.write(sap.ui.getCore().getModel("i18nModel").getProperty("conceptClauseFind"));
        oRm.renderControl(oControl.getAggregation("_concept"));
        oRm.renderControl(oControl.getAggregation("_conceptFilters"));
        oRm.write("&nbsp;");
        oRm.renderControl(oControl.getAggregation("_addClause"));
        oRm.write("</div>");
    }
});