问题 #990💬 已回答提出于 2018年4月1日作者 anand-gopinath0 个反应

如何监听事件以获取自定义组件的样式更新?

快速解答作者 artf

组件属性使用 'this.listenTo(this.model, “change:prop-name” ...'通过“......attributes.align = “left”' 组件看不到你的更改,改用 'this.model.components().at(0).addAttributes({ align: 'left' })',你不需要更新/渲染元素。

阅读下方完整回答 ↓

问题

@artf @arthuralmeidap @nojacko 我有一个自定义组件,比如这样,代码看起来是 [https://jsfiddle.net/nganand/n97g7g43/](URL)。 ![婴儿声](https://user-images.githubusercontent.com/25955939/38173314-f37c8ef8-35d9-11e8-94cd-db9da5c4559e.png)当自定义组件的属性发生变化时(例如,样式填充/边距时),如何监听事件?比如 init() { this.listenTo(this.model, “component:styleUpdate:text-align”, this.handleChange) }我希望通过选择“非父”来对齐按钮向左。而是选择祖先。那么,当父选中自定义组件的子节点视图时,该如何更改?我做了类似的事 this.model.attributes.components.models[0].attributes.attributes.align = “left” this.el.getElementsByClassName(“mjmlButton”)[0].align = “left”; this.render() 但没成功?

回答(2)

artf2018年4月4日
  1. 组件属性使用 'this.listenTo(this.model, “change:prop-name” ...'
  2. 通过“......attributes.align = “left”' 组件看不到你的更改,改用 'this.model.components().at(0).addAttributes({ align: 'left' })',你不需要更新/渲染元素。
lock[bot]2019年9月17日

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

相关问答

通过相似的问题讨论继续研究。

问题 #1848

页面重新加载后,加号(“+”)按钮不显示。

你好@artf, 当我拖动该区块时,显示了一个加号按钮。保存并重新加载页面后,“+”按钮不显示。我还需要在页面重新加载后显示按钮。请给我一些建议,我该如何解决这个问题? 请查看[jsfiddle](https://jsfiddle.net/sanjib00/o3tvskyn/1...

3 个回答更新于 2020年3月10日

问题 #1575

错误的模型通过了“component:styleUpdate”事件

“component:styleUpdate”事件中的模型与“component:selected”事件中的模型不同。我本以为点击组件后更改样式时,它们应该是一样的。https://jsfiddle.net/szLp8h4n/355/打开控制台。选择“hello world”文...

1 个回答更新于 2019年11月16日

问题 #482

自定义组件中的默认资产管理器

我正在为下面的模板创建自定义组件,我们希望用户输入文本、链接、悬停文本并选择图片,想用默认资产管理器选择图片,但不确定如何在自定义组件中获得选中的图片?以下是我使用的代码 view: defaultType.view.extend({ init() { this.listenT...

3 个回答更新于 2019年9月18日

问题 #1026

GrapeJS 无法渲染 HTML 代码

你好, 我把 GrapesJS 集成到我的应用程序(asp.net MVC)中,它能用,但有时 GrapesJS 无法渲染 HTML。 首先,我从另一个URL克隆html,并将这个html添加到GrapesJS。这个方法工作得很正常。 其次,我从 GrapesJS 编辑器获取...

2 个回答更新于 2019年9月17日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。