Seaside子组件updateRoot:加载JS失效，如何实现组件组合兼容？

问题原因 #

Seaside默认仅触发根组件的updateRoot:方法，子组件的该方法不会被自动调用。所以当你把Plotly的JS引入放在子组件的updateRoot:里时，只有它作为根组件运行时才会加载，作为子组件时会被跳过。

解决方案 #

1. 用资源库管理外部依赖（推荐） #

这是Seaside管理外部资源的最佳实践，能彻底解耦组件和资源加载的关系——不管组件在组件树的哪一层，只要被渲染就会自动加载所需资源，还能避免重复引入。

首先创建Plotly资源库类：

WAFileLibrary subclass: #PlotlyResourceLibrary
	instanceVariableNames: ''
	classVariableNames: ''
	package: 'YourPackage-Resources'

PlotlyResourceLibrary class >> updateRoot: anHtmlRoot
	super updateRoot: anHtmlRoot.
	anHtmlRoot javascript url: 'https://cdn.plot.ly/plotly-2.4.2.min.js'

然后在子组件的渲染方法中引入资源库：

ChildComponent >> renderContentOn: html
	"先引入资源"
	html script require: PlotlyResourceLibrary.
	"接下来编写Plotly图表渲染代码"

2. 让父组件自动遍历子组件处理updateRoot: #

将父组件（RootComponent）改为继承自WACompositeComponent，并重写#children方法返回所有子组件的集合，Seaside会自动遍历这些子组件，调用它们的updateRoot:方法。

修改RootComponent：

RootComponent subclass: #RootComponent
	instanceVariableNames: 'childComponent'
	classVariableNames: ''
	package: 'YourPackage'

RootComponent >> initialize
	super initialize.
	childComponent := ChildComponent new.

RootComponent >> children
	"返回所有需要处理的子组件"
	^ { childComponent }

RootComponent >> renderContentOn: html
	html render: childComponent.
	"其他页面渲染代码"

这种方式适合组件嵌套较多的场景，无需手动层层调用子组件的updateRoot:。

3. 根组件显式调用子组件的updateRoot: #

如果不想修改父组件的基类，最简单的方式就是在根组件的updateRoot:里手动调用子组件的对应方法：

RootComponent >> updateRoot: anHtmlRoot
	super updateRoot: anHtmlRoot.

	anHtmlRoot stylesheet url: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css'.
	anHtmlRoot stylesheet url: 'https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css'.
	"手动触发子组件的资源加载逻辑"
	childComponent updateRoot: anHtmlRoot.

这种方式适合简单的组件结构，但如果子组件嵌套多层，需要逐层手动调用，灵活性较差。

内容的提问来源于stack exchange，提问作者cts