问题标签 [svelte]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
502 浏览

javascript - 任意嵌套数组的每个块

https://svelte.technology/guide#each-blocks给出了每个块的示例以输出类似表格的结构:

该示例需要这种特殊结构:

如果事先不知道列,或者更一般地说,如果每行可能有不同的长度,有没有办法使用这个特性?例如(对于后者):

我没有看到任何地方表明#each可以在迭代之前“进入”组件数据的语法,因为它是。

我是否遗漏了什么,或者这个内部循环是不可能的#each?如果不可能,还有其他方法可以做到吗?(例如,您可以使用函数来迭代内部数组并嵌套辅助模板吗?)

0 投票
1 回答
198 浏览

javascript - Svelte REPL 和本地输出之间的区别

TL;DR:在线 REPL (Svelte 1.9.1) 有效,但本地已损坏。问题:我在本地做错了什么?

以下代码在此 REPL中有效:

也就是说,它产生输出:

1,2,2

01136 = 1,2,2

但是,在本地(Linux Mint 18.1 上的 Svelte 1.9.1,64 位),完全相同的文件会产生以下输出:

1,2,2

01136 = 未定义

如您所见,它可以grades正常访问,但不在循环grades[i]内。#each控制台不报告任何错误。

另一件神秘的事情

如果我删除这些行:

...然后本地渲染变为:

1,2,2

= 1,2,2

那么该#each块如何grades[i]突然变得未定义......但仅限于本地?

附加环境信息

本地版本通过以下方式拉入:

Game.js

main.js

index.html

该设置是https://github.com/charpeni/svelte-example的副本,我正在使用npm run build:watch.

0 投票
1 回答
3536 浏览

javascript - 在 Svelte 中是否有可能使用双向绑定到嵌套对象值的 #each 循环?

以下 Svelte 代码可以正常工作:

使用这个 JSON:

你可以看到它在行动。但是如果我们想options用一个#each数组循环怎么办……这可能吗?

如果我们做除了绑定之外的所有事情,它几乎可以工作:

可以看到占位符是正确的,双向绑定工作正常。但是代码还不正确,因为options.name在绑定中是硬编码的,而不是使用循环值。如果我们试图解决这个问题bind:value='options[option].value'我们会得到一个语法错误,Expected '.

那么,如果可以使用循环值在循环内进行双向绑定,那么正确的语法是什么?

0 投票
2 回答
2130 浏览

javascript - 在 Svelte 自定义方法中使用 getter/setter

在自定义方法中使用 get/set 对时,我无法编译我的苗条组件。这不支持吗?还是我做错了什么?

例子:

假设我想要一个显示名称的组件,并且我想使用它来设置名称。 com.name = 'The new name';

但是,我只希望组件在名称中没有空格的情况下使用该名称。

问题是当我尝试编译它时,它说有一个重复的键。

这是一个 REPL - https://svelte.technology/repl?version=1.13.2&gist=0eeab5717526694139ba73eae766bb30

我在文档中没有看到任何关于此的内容。我不能使用二传手,但我希望能够。

0 投票
2 回答
1200 浏览

svelte - 如何在 svelte 中模板内联属性?

在这个 repl 示例中,我将如何设置style内联属性,而不需要复制锚标记?

https://svelte.technology/repl?version=1.13.6&gist=0a2bd4376b2fe742fb0d233755c44796

0 投票
1 回答
1422 浏览

javascript - 基于 Svelte 类的组件示例

我正在尝试学习 Svelte 和 TypeScript。我想知道是否有任何模式可以包含或使用 ES6 类编写纤细的组件。当前文件包含所有脚本、html 和数据、css。我想让它们分开文件。请帮我!

0 投票
1 回答
115 浏览

svelte - 从实例化组件访问目标

我有一个应用程序组件,我用它来实例化

我还没有找到从 oncreate 钩子中的 App 组件到达目标节点的方法:

0 投票
1 回答
704 浏览

javascript - 如何使用 svelte 在表格中实现箭头导航

data.selected=[i,j]给定一个带有事件侦听器的表格,keydown以根据键盘箭头更改坐标,如何以及在何处插入表达式if (i===selected[0] && j = selected[1]) node.focus()

主处理程序可以更改节点的索引,selected但没有对节点本身的引用。

我尝试在模板中插入表达式,if block但我得到了错误。

0 投票
1 回答
111 浏览

svelte - 一个组件可以通过其他组件传递吗?

我最近开始尝试构建一个<Table>可以在整个应用程序中使用的标准组件。这个想法是应用程序中的所有表都可以以可维护的方式共享通用功能。为此,我认为<Table>组件本身由其每个部分的组件组成,并将其中一些组件提供给<Table>每个独特用例的每个组件,这将是有用的。

<Table>可能如下所示。

<Row>可能如下所示。

<Column>可能如下所示。

这个想法是,每次使用 a 时,都会提供<Table>一个自定义。<Column>这将很有用,因为每个表都有不同的数据,因此在每种情况下需要对列进行不同的处理。但是,我很难找到一种方法来将一个组件从本质上传递给其他组件。这在 Svelte 中可能吗?

顺便说一句,我注意到最近似乎在 GitHub 上讨论了类似的事情。虽然我当然知道可以使用new构造函数在组件中实例化组件,但这种方法不会被挂钩到 Svelte 生命周期中,这很重要。

0 投票
2 回答
2421 浏览

svelte - Svelte 是否支持复选框绑定?

Svelte 是否支持复选框绑定?

我知道文档说明了以下内容,因此它可能尚未实施。

双向绑定尚未完全实现。请稍后再回来查看可用绑定的完整列表!

我想实现看起来像这样。

但是,当我现在尝试这个时,它似乎不起作用。

更新

经过进一步调查,绑定似乎以某种方式工作,绑定值在组件数据中发生变化。但是,由于某种原因,更改并未反映在 DOM 中。它们可以通过简单地将数据设置为自身(component.set({checked: component.get('checked')}))来反映,强制更新 DOM,但它们不会像绑定那样自动反映。

更新 2

创建了一个 REPL来演示这个问题。