问题标签 [aurelia-templating]

我有一个自定义组件，它有一个items属性，定义为@children组件：

tracker-item是一个带有@noView注释的简单视图模型，并且只有一个属性。

这些项目在我的视图中定义如下：

这工作得很好，但是在我更新我的项目以便使用 aurelia-cli 构建它之后，每次调用组件时我都会看到这个错误：

TrackerComponent 是我的自定义组件的名称。

我不明白该错误来自何处，因为在我的代码中的其他地方，我对另一个不会引发相同错误的自定义组件有相同的定义。

这有什么问题？

在为 aurelia 组件使用无容器功能时，我看到了奇怪的行为。我们正在为 SVG 容器中创建自定义元素，这要求我们在将自定义元素标签添加到 DOM 之前使用无容器标签剥离自定义元素标签，因为 SVG 容器中只允许使用 SVGElements 标签。我们正在使用 Aurelia 版本 1.0.0 并使用 webpack 构建我们的 SPA。

在这里您可以找到一个 gistrun 示例，该示例显示了无容器使用的 2 实现。 https://gist.run/?id=58ba6282ad54c1263eec3a141fe42183

在此示例中，我创建了 2 个视图模型并将其绑定到我们的自定义元素。用来告诉aureliaas-element="compose"我已经创建了视图模型并且 Aurelia 不应该创建 VM。这些与自定义元素的区别在于无容器标签：

1. CustomElement@containerless在 Viewmodel 中没有标签，但在 HTML 视图中有“无容器”。

2. withattr 组件在 HTML 视图中没有“无容器”，但它@containerless在 Viewmodel 中有标签，如 Aurelia HUB 中所述。

我希望在这两种情况下我都会看到一个蓝色矩形。由于无容器标签，customelement 标签被 Aurelia 剥离。但是该@containerless标签似乎不起作用，如在实现 2 中一样。

问题： 任何线索为什么这些实现有不同的输出？哪个是正确的？我希望 2，如 Aurelia Docs 中所述，@containerless标签应放置在视图模型上。

任何帮助，将不胜感激 ：）

是否可以编写在同一个文件中定义的模板，如下所示。还是要求组合模板包含在单独的文件中？

在repeat.for中这两个选项之间是否存在性能或效率差异：

选项 1：内联元素

选项 2：自定义视图元素

其中视图元素是：

视图元素.js

视图元素.html

如果视图元素包含很多绑定，会有所不同吗？

我有一个所谓的聊天视图，它基本上由一个repeat.for循环所有消息并使用<compose>.

问题是，一旦消息计数超过 50 并且用户在聊天之间导航（这会触发repeat.for更新，因为我替换了 VM 中的数据集），它就会变得非常慢。

我觉得在处理这样的视图方面我做错了。我能得到一些关于其他选择的意见吗？

我尝试过 UI 虚拟化，但不幸的是，当前插件不支持我需要的功能（可变高度项、自下而上对齐）。

我还对绑定做了很多优化，大多数都是一次性的，并且对数据集的更新是去抖动的。但这并没有改善事情，因为主要瓶颈是初始加载（第一次绑定视图）。

谢谢！

当前方法的示例：

我正在使用 w2ui 网格，模板列生成如下：

如您所见，扑克卡是一个自定义属性。并且它不会在网格中呈现。还有其他方法吗？

IE10/11 存在一些性能问题。以下 plunker 解释了我们在使用自定义元素重复表格行时性能下降的一些情况。

Plunker 示例

在这个 plunker 示例中，我们在 chrome 中总共需要 68 毫秒来渲染整个表格。在 IE11 中，我们得到 280 毫秒，并且看到每行的渲染速度提高了 100%。虽然 chrome 每毫秒最多执行 3 行，但 IE 每 2ms 执行一次。

这个 plunkr 是我们应用程序的基本模型。在我们的应用程序中，我们重复以下模板，该模板要重得多。它涉及样式计算和根据用户设置和权限级别显示/隐藏绑定。

它是瑞典语，所以不要介意文字。

第二行（扩展信息）是 if.bound 所以它最初没有被绘制。

在我们的应用程序中，如果我们渲染一个包含 100 行模板的视图，chrome 会在 587 毫秒内渲染整个表格。IE11 在 3779 毫秒内完成。Edge 用了 1283 毫秒，而 Firefox 用了 909 毫秒。

在 IE11 中每一行大约需要 30ms，

IE11 使用 aurelia-template 表现得这么差有什么原因吗？我们可以做些什么来提高 IE 渲染速度？我曾尝试将绑定设置为 oneTime，但这并没有起到多大作用。您是否应该避免在重复和 IE 中无法正常工作的自定义元素中执行某些操作。由于模板很大，我们想要自定义元素，因为它具有可重用性和代码管理。

使用 Aurelia JS 框架，我需要能够检测到 repeat.for over 元素的结果何时已通过父 VM 中的代码完全加载到 DOM 中。我知道我可以将侦听器注入@bindable 并在附加（）上触发侦听器，但这对我来说似乎很不礼貌。

有任何想法吗？

我想要一条通往弹出对话框的路线。我用@noView 创建了一个视图模型

但这会导致此错误：

在我看来，从我的 navbar.ts 显示弹出窗口不合适，因为我不喜欢在导航栏中有这样的代码，我宁愿把它放在更合适的地方。

在不丢失页面当前内容的情况下从导航栏显示弹出窗口的最佳方式是什么，所以基本上可以从任何地方显示它，并且在 navbar.ts 中也完全没有代码。

有没有更好更好的方法来实现这一目标？我应该重新考虑我的页面布局吗？

谢谢。

我正在尝试在 Aurelia 中实现“切换器”或“视图堆栈”组件，这对于向导、分页内容和单步执行任务列表很有用。这将一次从多个可能的子组件中显示一个子组件。我希望使用标记类似于：

现在，这里明显的替代方案是：

1. <compose view-model.bind="currentStep">并一次将 currentStep 变量指向每个组件。（+ves：组件仅在访问时实例化，-ves：需要知道每个组件的路径，所有子组件都需要是有效的视图模型）
2. if.bind='active'在 中的每个组件的定义中添加一个，然后从类中slot设置这个成员。（+ves：更容易理解，-ves：需要专门编写组件才能在此处使用）。activemy-switcher
3. 通过@children 检索子元素（如果这现在可靠吗？）并手动将元素添加为子 DOM 元素，然后调用ViewCompiler.enhance. （-ves：似乎无法让@children 工作，大量的自定义代码）

这些中的每一个都感觉有点人为的解决方案。有没有人知道是否可以/应该使用更清洁的方法？