问题标签 [svelte]

在 Svelte 中，您可以绑定checked复选框的属性。然后，您可以observe在组件上绑定值，其回调提供当前值和先前值。

但是，当我尝试评估复选框状态的变化时，当前值和以前的值似乎相同。请看这个例子来说明问题。我在这里做错了吗？

在 Svelte 中，应如何根据组件状态更改元素上的类？

例如，您可能希望在某些条件下将类应用于按钮，如下例所示。

现在，这可以通过创建一个在特定条件下返回类名或空字符串的计算属性来实现。

但是，我担心这是否会污染计算属性名称空间。例如，如果有status，则可能需要同时设置动态文本（like statusMessage）和类（like statusClass）。

有没有更好的方法来做到这一点，或者计算属性是要走的路？是否计划为 Svelte 提供更明确的 CSS 支持？

第一次尝试：

在编译期间导致错误：

我能想到的最好的：

当我昨天浏览文档时，我对Svelte真的很感兴趣，但我正在努力建立一个非常基本的项目，而且我似乎无法弄清楚我做错了什么。

我从以下 HTML 开始：

然后，我创建以下App.html组件：

我跑了svelte compile --format iife App.html > App.js，一切正常。

到目前为止，一切都很好！

现在，我创建了一个Line.html包含以下内容的组件：

我像这样修改我的App.html组件：

我希望这段代码能够将类似的东西添加<div class="line">test</div>到 DOM 作为<div class="lines"></div>.

但是，当我编译此代码时收到以下警告：

当我尝试运行编译后的代码时，我只会在控制台中得到以下输出：

我在这里做错了什么？

笔记

我也在Github 上提出了这个问题。

我了解 Svelte 可以生成 AMD输出，并在文档中找到有关如何执行此操作的一些详细信息。我还可以找到一些关于如何配置汇总以输出AMD 模块的信息。但是输入呢？当我有 AMD 模块作为依赖项时，我需要做什么？

例如，假设我有两个不同的第三方库，它们都作为 AMD 库分发，并且我想在我的 Svelte 项目中使用这些库。我需要如何修改例如。这个嵌套组件演示允许这些 AMD 模块用作我的 Svelte 组件中的依赖项？

另外，我是否能够配置是否将这些库与我的 Svelte 组件捆绑在一起？如果是这样，我需要在哪里这样做？

笔记

我也在Github 上提出了这个问题。

当我将对象传递给 Svelte 组件时，我希望能够解构它。像这样的东西？

在组件内

目前看来我必须像这样手动完成

如何使用 svelte 有条件地渲染 html 元素上的属性？需要明确的是，我不是在谈论条件值，而是属性存在本身。

例如，我只想自动聚焦此输入列表中的第一项：

该属性autofocus应该仅适用于第一项。我可以使用 index 来检测第一项，但autofocus="{{index===0}}"呈现autofocus="true"or "false"，所以这不是我需要的。

另见https://github.com/sveltejs/svelte/issues/259

我正在使用嵌套组件，我想使用data父组件中的值设置该嵌套组件的整个属性。

例如，第一个app.html组件

那么嵌套组件nested-component.html, 将是：

相反，这意味着我必须这样做：

是否有某种关键字属性可以做到这一点？

更新

由于没有扩展运算符，我做了这样的事情，您可以在其中设置一个任意字段，例如data然后观察它以更新所有属性。在嵌套组件中：

然后在使用该嵌套组件时，在哪里forNestedObject是这样的{ someProperty: 123 }：

我希望在一个模块中声明的样式应用于该模块的插槽元素（在另一个文件中填充）。

这是以下示例的Svelte REPL ：

应用程序.html

列表.html：

资料：

红色不适用于a通过插槽添加的标签元素。

我对 Svelte 很陌生，但我在网上找到了尽可能多的内容，但似乎找不到解决方案。任何帮助将不胜感激，谢谢。

所以我目前有：

应用程序.html

并得到错误Uncaught TypeError: Expected a function at App.debounce。这来自 Lodash，因此 Svelte 的方法似乎没有被传递。

额外的额外编辑

我目前如何实现它的额外背景：