问题 #3586✓ 已解决提出于 2021年7月2日作者 jcsofts3 个反应

How to listen the components change in a component.

快速解答作者 dm-siegel❤ 2

我也没能让这个方法正常工作。设置 listTo 时错误读取 components（）。初始化时标签是空的（里面没有内容），所以这很合理。算了......我是在模型的初始化中操作，而不是视图。 “打字稿” init（） { const children = this.model.components（）; this.listenTo（children， 'add remove'， this.handleComponentsChange）; }, ``` 在我把它放到正确的初始值:)后，这个方法就成功了

阅读下方完整回答 ↓

问题

init（） { this.listenTo（this.model，'change：components'， this.handleComponentsChange）; },

我开发一个组件，尝试监听子组件的变化，然后添加上面的代码以查看初始化，但添加/移除组件时函数没有触发。

我该如何在组件视图中监听组件的变化？

谢谢

回答（4）

👍 最有帮助dm-siegel• 2023年4月28日

我也没能让这个方法正常工作。设置 listTo 时错误读取 components（）。初始化时标签是空的（里面没有内容），所以这很合理。

算了......我是在模型的初始化中操作，而不是视图。 “打字稿” init（） { const children = this.model.components（）; this.listenTo（children， 'add remove'， this.handleComponentsChange）; },


在我把它放到正确的初始值:)后，这个方法就成功了

anlumo• 2021年7月8日

组件收集不会改变，这也是为什么没有触发事件的原因。

存储后端是一个骨干集合，详见[这里]（https://backbonejs.org/#Collection）。你必须听它的事件，特别是“添加”和“删除”。

artf• 2021年7月27日

正如Andreas已经提到的，你必须为收藏添加一个听众。 “''js init（） { const children = this.model.components（）; this.listenTo（children， 'add remove'， this.handleComponentsChange）; },

GJSBlock• 2026年5月17日

谢谢你举报，@jcsofts。关于如何监听组件变化的好问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） => console.log（'component rea...

在 GitHub 上查看完整讨论 →