问题 #2494💬 已回答提出于 2020年1月7日作者 andrewryan19060 个反应

在向画布添加组件时,DOM中会创建重复组件(但不会在模型中)

快速解答作者 andrewryan1906

好的,据我所知,问题在Sorter.js,围绕这段代码展开: 每当你开始把组件拖到画布上时,onMove 都会调用这个代码。我看到你创建了临时组件,然后在下一行立即删除它。 问题出在这段代码里: 不知为何......当 model.trigger 运行时,它会创建两个相同的组件副本;尽管 toAdd 数组只包含一个。我搞不明白为什么它会连发两次......但最终结果是创建了两个组件,而不是一个,代码行如下: ''' dropModel = comps.remove(tempModel, opts);''' ...只删除两个组件中的一个,这会产生一个额外的幽灵组件,我认为这会导致 #2493。我不明白为什么这种情况只发生在已加载的模...

阅读下方完整回答 ↓

问题

当我把一个组件——比如地图——拖到画布上时,它现在会在DOM中创建该元素的三个副本。不过模型是正确的,刷新屏幕时渲染正常。

不打算搭建一个完整的沙盒来复现,有什么快速想法可能是什么导致这种情况吗?

谢谢, 安德鲁

回答(3)

andrewryan19062020年1月7日

好的,据我所知,问题在Sorter.js,围绕这段代码展开: 每当你开始把组件拖到画布上时,onMove 都会调用这个代码。我看到你创建了临时组件,然后在下一行立即删除它。 问题出在这段代码里: 不知为何......当 model.trigger 运行时,它会创建两个相同的组件副本;尽管 toAdd 数组只包含一个。我搞不明白为什么它会连发两次......但最终结果是创建了两个组件,而不是一个,代码行如下: ''' dropModel = comps.remove(tempModel, opts);''' ...只删除两个组件中的一个,这会产生一个额外的幽灵组件,我认为这会导致 #2493。...

andrewryan19062020年1月9日

当我从配置init中移除这行时,这个问题就消失了:

    domComponents: {
       ...
       storeWrapper: true,
    },

这种环境导致了这种行为。还是不明白是什么。

artf2020年1月12日

感谢@andrewryan1906所有的见解,实际上分拣器文件一直在我的**重构*列表里,但还没找到时间处理...... 总之,我还是不太明白发生了什么,肯定需要你做一个可复现的演示,否则我帮不上忙...... 最后一件事,你用的是最新版本的GrapesJS吗?

附注:如果#2493是这个问题引起的,我觉得你可以关闭它

相关问答

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

问题 #1906

Components & Js - 加载模板

嘿, 我有一个组件连接了一个 JS。一切都是用JS创建的。 当我第一次拖放方块时,JS运行正常,一切运行得很顺畅。 当我加载已有模板时,JS似乎没有运行。JS会创建一些DOM元素,比如DIV和CANVAS,但它们不会被显示出来。 我添加了警报,警报显示了,但JS的其他部分似乎无...

3 个回答更新于 2020年4月2日

问题 #2679

为自定义主成分添加类名

[问题:] 你好,我用过这个构建器插件在 Angular 7 里。这个结构非常好,也可扩展。 但我在定义自定义组件这个插件时遇到了一些问题。 问题是如何向自定义DomComponent添加类。 我创建了新的视频包装DOM组件。 里面包含了iframe。 我想要这个domComp...

2 个回答更新于 2020年4月11日

问题 #3082

XSS 在 Live Preview 中的漏洞

版本: 0.16.22 你能重现演示中的bug吗? [x] 是的 步骤:点击导入HTML插入 '<img src=“anyimagesource.gif” onload =“alert(1)”/>'JS将被处决 在iframe上设置合适的“沙盒”属性或许能缓解这个问题。

3 个回答更新于 2024年7月16日

问题 #1708

StyleManager 事件每次变更都会多次触发

复制: 在全新安装的GrapesJS中,在演示页面(index.html内)添加一个事件监听器,如下: 'editor.on('component:styleUpdate:width', (model) => { console.log(模型); });问题: 当更改任何元素的...

3 个回答更新于 2023年5月3日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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