问题标签 [svelte]

将 JSON 导入 Svelte 的 main.js 文件的模式是什么？

我正在努力：

但这并不能解决，因为 JSON 不能作为 es6 模块导入。

我有一个 sapperjs 应用程序，就像你从 call 获得的应用程序一样npx degit sveltejs/sapper-template my-app。我想添加一个字体。普通人可能会在下面添加这样的一行app/template.html：

网络原因使这不切实际，所以我想在本地托管字体。在 create-react-app 中，我会简单地import 'typeface-roboto-slab'放在我的 App.jsx 或等效组件的顶部。如何在我的 sapper/svelte 应用程序中实现类似的效果？

我相信最好将它添加到app/template.html其他任何地方，并且 css 将被限定为单个组件。这似乎是几乎任何应用程序都需要的东西，但在我能找到的文档中却没有。

我目前正在将使用 VueJS 的 Laravel 应用程序迁移到 SvelteJS（用 Svelte 替换 Vue 部分）。

使用 VueJS，我可以轻松地将 props 发送到安装在页面上的组件：

然后稍后访问组件中的 name 属性。

在 Svelte 中，我只能在嵌套时传递道具并在组件中访问它们。

App Component：我可以引用用户组件并发送道具

用户组件：

但我不知道如何将道具发送到未嵌套的组件，即：在独立的用户组件中，我无法发送道具。

我总是得到一个未定义的道具值错误。关于如何实现这一目标的任何想法？

谢谢

我正在 Svelte 中开发一个甘特图组件，它由 100 个行组件组成，每个组件都包含多个任务组件。可以拖动和移动任务。性能是重中之重，我使用虚拟列表仅呈现可见行。

问题是当我移动任务并将行滚动出视图时，它们会被破坏，当我滚动回它们时，它们的状态会被重置。这个使用 svelte-virtual-list 的 REPL 说明了问题https://svelte.technology/repl?version=2.13.5&gist=bdb4c523d2e1cf7e3aef452e3f24d988 我想知道处理这种情况的最佳方法是什么。

目前我正在使用任务对象作为道具并对其进行更新，引用保持不变并且滚动不会影响它。

但是在任务中我像这样更新状态

并且模板使用 task.propname 引用每个道具，我不确定这是否是这样做的苗条方式，因为不清楚究竟设置了什么。

我可以像这样绑定任务变量

但是需要绑定很多变量（超过 10 个），我希望未来可能的插件可以从 Task 组件内部更新新的道具。

这处理潜在的更多道具，但我在状态事件中更新任务对象，如下所示：

我应该更喜欢哪一个来提高性能，或者有更好的方法来处理这个问题？

到目前为止，我们可以使用计算属性执行以下操作。

我们可以做这样的事情吗？

按照这个链接https://github.com/sveltejs/svelte/issues/11最终把我带到了https://github.com/sveltejs/svelte-extras/。但这再次解释了深刻的观察。

更新：PS 我知道 {field.values.length} 是无效的 javascript，我只是想展示我想要实现的目标。意味着观察类似于 ember 的嵌套属性

我正在尝试使用自定义样式实现复选框组件，但找不到代理绑定的方法。这是组件现在的样子（它不起作用）：

我希望它可以像往常一样使用带有checked或group绑定的复选框。但现在没有组我得到一个错误。有没有办法用 Svelte 做这些事情？

我制作了一个用于输入财务数字的组件，用于我的输入表单。它现在真的很好用，除了一个奇怪的行为：当我点击输入字段时，它会按预期获得焦点，但是当它已经有焦点时点击它会带走焦点。

组件中只有一个 on:click 处理程序，当我删除它时，行为没有改变。所以，我不知道是什么导致了这种奇怪。

这是显示问题的 REPL。

https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e

您好，我是 Svelte、Sapper & Express 的新手。

问题：
我正在使用 Sappers _layout.html 来显示 2 个组件（标题和菜单），这些组件应该显示在所有页面上，登录页面除外。

实现这一目标的正确方法是什么？

可能的解决方案：
A）从静态文件夹提供登录页面，并使用快速中间件路由到它？

B）将登录作为我项目的根目录，并将所有其他路由下移一个级别，以便他们可以共享一个不涉及登录页面的通用布局？

C) 在布局中放置 if 语句并确定用户何时在登录页面上以隐藏标题和菜单组件。

D) 不使用布局来显示组件。

我构建了一个简单的横幅组件，该组件被导入到 _layout.html 中。它公开了 5 种方法（dismiss、info、warning、...）。

目前我正在使用商店来跟踪这些方法，如下面的 _layout.html 所示。

_layout.html

所以我可以从应用程序的任何部分调用它们，如下所示：

博客.html

这工作正常，但我想知道这是否是最好的 Svelte 方法。

I have this code in my component that is essentially the same as the example in the svelte docs:

I then have this code in the script tag of the HTML page that instantiates this component which is also essentially the same as the svelte docs:

However, when I trigger the event, I get this error: this.dispatchEvent is not a function.

I've tried a number of variations on this.dispatchEvent() like simply dispatchEvent(), which doesn't error but also doesn't trigger the listener; and window.dispatchEvent() which also fails to trigger.

What am I doing wrong?