一些背景

我使用一个基于前端组件的 UI 框架，它完全通过 jQuery 管理其 UI。在最初创建它的时候，这听起来并不那么疯狂，而 jQuery 是制作交互式 Web 组件的稳定逻辑选择。然而，这些天来，手动跟踪每个变量和数据的每个变化，然后在 DOM 中反映出来，不再是唯一可行的选择。随着框架的发展，保持一致的代码风格和代码效率的负担也随之增加。

我最近一直在查看 Maquette.js，看起来它可能只是帮助解决这些挑战以及更多挑战的框架。

问题

我知道使用这种技术将 Maquette 与其他库集成。但是，我的框架很大，很多人依赖它，将我们所有的渲染都转换为 Maquette是不可行的。至少不是一气呵成。因此，如果我确实使用 Maquette，我预见自己将被迫为组件的每个实例使用新的投影仪。这是我所关心的。

与使用单个投影仪渲染所有内容相比，页面上存在大量投影仪是否会对性能产生负面影响？换句话说，就性能而言，将页面上的投影仪数量降至最低是否理想？

如果代码有帮助，我已经修改了 Maquette 主页上的简单示例来说明这一点。1000 台投影仪同时运行。看起来不错，但感觉就像我在做 Maquette 没有设计做的事情。

如前所述，我想使用 Maquette 作为基本的超脚本语言。因此，我不想使用maquette.projector. 然而，尽管能够将使用 Maquette 制作的 SVG 对象附加到 DOM，但 DOM 似乎并没有更新。例如，在下面的代码中，我希望能够单击一个按钮来创建一个圆圈。如果我使用 Chrome 开发工具检查 DOM，我可以将 SVG 圆对象添加到 DOM，但 DOM 尚未更新。我应该如何更新 DOM？

为什么appendChild不渲染任何东西？

Chrome 调试控制台快照

我基本上不确定是什么导致了这个错误^^。

我做了一点挖掘，似乎是作为bypreviousProperties传递的。反过来，在它被标记为 just 的地方传入。这个 VNOde 是一个有效的 VNode，但缺少.previous.propertiesupdateDom()previousupdatevnodeproperties

我很确定我已经使所有key需要区分的东西（通过设置独特的属性）变得可区分，所以我认为这不是问题，尽管我可能会弄错。

我正在尝试创建一个包含应用程序级导航图标的“li”元素数组。我有一个 css 类“is-active”，它突出显示列表中的活动“li”元素，指示导航模式中的活动位置。我希望 Maquette JS 在最终用户选择适当的图标时将其呈现为“突出显示”。我正在尝试使用 classes:{} 属性：

显然这是不恰当的使用。本教程提供了一个示例，其中布尔值确定一个类是否在 classList 中；但是，如果为 true，我实际上需要使用 classList A，如果为 false，则需要使用 classList B。

很难找到 maquettejs 条件 css 的好例子。有什么想法吗？

我正在使用 maquette js 开发一个小型应用程序。该库使用虚拟 DOM 实现。在某些触发数据存储更改的用户事件之后，它会导致（部分）重新渲染，包括创建一些新的 DOM 节点。

如何确保其中一个新节点（即 contenteditable div）在重新渲染后获得焦点？

同样：如何在先前聚焦的元素中保留光标位置？

当我尝试在 createMapping 组件中使用函数时，我目前遇到问题，这是代码

itemConcurso.js

应用程序.js

它确实有效，但是在我第一次单击该组件时，它会引发以下错误：

我尝试了很多事情，但似乎有些事情我不明白

如何使用Maquette正确定义单选按钮，以便呈现文本？如果我使用一个<p>元素，文本会出现，但在新行上。

但是，如果我使用<br>元素，则不会出现文本。

我究竟做错了什么？

我们想在现有系统中使用 maquette。使其他 3rd 方库（例如 select2、修改 DOM 的引导工具提示）在 maquette 中运行良好的最佳实践是什么？

我正在使用 TypeScript 和 Maquette 来编译 .tsx 文件。代码可以正确编译并在浏览器中运行，但 ESLint 对我的jsx函数不满意，将其标记为“未使用的 var”。

我试图尽可能地模仿TypeScript Maquette 入门项目，但是当我查看该项目时，我没有看到 linter 警告。不知何故，在启动项目中，ESLint 和 TypeScript 认识到这jsx是我的工厂函数，但在我的项目中，尽管在我看来配置相同，但事实并非如此。

我缺少的拼图是什么？尽管多次阅读所有文档并以我能想象的各种方式进行谷歌搜索，但我还没有找到任何可以确定问题原因的内容。

徽章.tsx

但是当我运行 eslint ( ./node_modules/.bin/eslint . --ext .json,.js,.ts,.jsx,.tsx) 时，我收到以下警告：

我在下面包含了我的配置文件，但这是一个大项目，所以我正在编辑我认为不相关的部分：

包.json

tsconfig.json

.eslintrc.json

.typescript.eslintrc.json