javascript - 如何在代码中追踪 JavaScript 动态创建的元素的起源？

Question

拥有 SAPUI5 应用程序。由xml创建的Html View 。 JavaScript Controller 。该应用程序的一些元素，例如按钮是在相应 View 的 Controller 中动态创建的。 IE。无法使用元素的 id 在 Controller 中获取它，因为 id 是动态创建的。想要获取应用程序的那些动态创建的元素来修改它们，例如修改按钮。将动态创建的元素跟踪回其创建位置的代码的最佳方法是什么？例如。如何在 JavaScript Controller 中追踪按钮回到它的起源？这是一个巨大的应用程序，一个 View 有多个 Controller 。我不只是懒。

Answer 1

组件渲染器类中的 render 函数(最终)创建 DOM 元素。您可以像这样向其中注入(inject)调试器语句:

let __buttonRender = sap.m.ButtonRenderer.render;

sap.m.ButtonRenderer.render = function() {
    let control = arguments[1];
    console.log('Creating button: ', control.sId);
    debugger;
    return __buttonRender.apply(this, arguments);
}

你或许可以根据这里的Id修改控制对象。我不太确定你的最终目标是什么。渲染器可能从 XML 中获取属性和数据，因此如果您想修改按钮，我会在数据源中进行操作。上面的代码可以让你在模型到达 DOM 之前破解模型，但这有点令人讨厌。