我正在尝试使用<select/>从基于 Promise 的函数获得的数据来初始化输入。输入初始化选项后（每个选项从解析的数据中获取值和标签），属性将绑定到<select/>.
但是每次我更改选项（使用属性绑定）时，{#await}块内的所有内容都会重新加载（似乎它解决了相同的 Promise 并重置了选项）。
当我删除绑定时，不会发生这种情况。
我已经尝试过以下方法：
尝试将属性绑定到选择。
`<select bind:value={selected_device}>...`
尝试绑定一个从列表中获取所选选项的事件。
`<select on:change={set_selected_device}>...`
尝试制作另一个按钮来获取所选选项。
<select>...</select>
<button on:click={set_selected_device}>Set</button>`
这是当前状态的片段：
等待块：
<div class="device-select container">
{#await VoiceStreamingService.get_microhpones()}
{:then devices}
<select id="device-options">
<option selected disabled>Select an Option...</option>
{#each devices as device (device.deviceId)}
<option value={device.deviceId}>{device.label}</option>
{/each}
</select>
{:catch}
{/await}
<button on:click={set_selected_device}>Connect To</button>
</div>
set_selected_device函数：
function set_selected_device() {
let d = document.getElementById("device-options");
selected_device = d.options[d.selectedIndex].value;
console.log(selected_device);
}
我是否遗漏了一些重要的东西，或者这是一个错误？
我想- mywebsite在每个 Svelte 页面上添加一个标题后缀。
我正在努力寻找如何轻松和简单地做到这一点。
在 svelte 网站源代码上，我们可以看到他们手动执行：https : //github.com/sveltejs/svelte/blob/1273f978084aaf4d7c697b2fb456314839c3c90d/site/src/routes/docs/index.svelte#L15
我开始创建一个这样的组件：
<script>
export let title = false;
</script>
<svelte:head>
<title>
{#if title}
{title} • WebSite
{:else}
Website • Home suffix
{/if}
</title>
</svelte:head>
但：
<title> can only contain text and {tags}svelte(illegal-structure)错误怎样才能实现我想做的事？
有没有办法在 Svelte 3 中绑定对象字段？
例子：
<script>
import MyComponent from "./MyComponent.svelte"
let myobjectID
</script>
<MyComponent bind:myobject[id]={myobjectID}>
<!-- Where myobject == {id: "123", name: "myName", and so on...} -->
这可能吗？
这里有一个类似的问题，但我不相信答案适用于我的用例。
我正在使用Svelte MaterialUI并尝试扩展DataTable组件，使其具有拖放行的功能。我正在使用svelte-dnd-action模块来支持拖放行为。
以下效果很好。我可以拖放表格的行。
<table>
<thead>...</thead>
<tbody use:dndzone{...opts}>
...data
<tbody>
</table>但是，当尝试将模块插入 Material UI 组件时，我收到一条错误，指出“操作只能应用于 DOM 元素，而不是组件。”
<DataTable>
<Head>...</Head>
<Body use:dndzone={...opts}>
...Data
</Body>
</DataTable>组件的定义Body如下所示：
<tbody
use:useActions={use}
use:forwardEvents
class="mdc-data-table__content {className}"
{...exclude($$props, ['use', 'class'])}
><slot></slot></tbody>
<script>
import {setContext} from 'svelte';
import {get_current_component} from 'svelte/internal';
import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
import {exclude} from '@smui/common/exclude.js';
import {useActions} from '@smui/common/useActions.js';
const forwardEvents = forwardEventsBuilder(get_current_component());
export let use = [];
let className = '';
export {className as …我想知道为什么这段代码
<div class="home" on:mousewheel="{e=>handleScroll(e)}"></div>
返回以下错误
类型 '{ 类：字符串；onmousewheel: (e: 任意) => void; }' 不可分配给类型“HTMLProps”。类型“HTMLProps”上不存在属性“onmousewheel”。
这只是出于好奇，因为即使有错误它也能完美地工作。
诗。我正在使用 TypeScript
在我的 App.svelte 中，我的函数包含以下代码：
<script>
import Categories from "./Categories.svelte";
let choice = { category: false };
export function toggle() {
choice.category = !choice.category;
}
</script>
{#if choice.category}
<Categories />
{:else}
<p>Foo.</p>
{/if}
在我的类别组件中，我有以下代码：
<button id="vegetation" on:click="toggle()">
<span>Analyse vegetation and forestry</span>
</button>
我想要的是：当我单击类别组件中的按钮时，toggle()应该调用该函数。
我怎样才能做到这一点？
我想警告用户在离开页面之前保存他的更改（表单更改）。如果他点击窗口上的任意位置，我想触发此警报。它可能是后退按钮或重新加载或页面上可用的任何导航链接。有人可以帮忙吗？
据我了解，与许多前端框架一样，Svelte 允许开发人员将逻辑分离为更小的、可重用的组件文件。这样做时，您可以将 props 从父组件传递到子组件。
我想知道是否可以将 props 传递给根组件本身。我正在尝试使用 Svelte 创建模型，并需要在 App.svelte 范围之外确定一些变量（即在导入的同一级别分配的变量bundle.js）
我正在尝试在 SvelteKit 中创建一个动态更新的导航栏，并相应地设置当前打开的部分的格式。我试图根据路径的第一部分识别页面，如下所示：
__layout.svelte：
<script context="module">
export const load = ({ page }) => {
return {
props: {
currentSection: `${page.path}`.split('/')[0],
sections: ['home', 'dashboard', 'settings']
}
};
}
</script>
<div class="min-h-screen bg-gray-100">
<Header {...props} />
<slot />
</div>
Header.svelte
<script>
import Menu from "$lib/nav/menu.svelte"
</script>
<Menu {...props}></Menu>
Menu.svelte
<script>
export let sections;
export let currentSection;
</script>
{#each sections as { section }}
<a
href="/{section}"
class="{section == currentSection
? 'bg-gray-900 text-white'
: 'text-gray-300 hover:bg-gray-700'} other-classes"
>{section}</a
>
{/each}
这会导致props …
我正在通过环绕一个精简的可写存储来创建一个自定义的精简存储。
我想检测该商店何时未被任何组件订阅；当订阅数为0时
我的目标是清除一些在无人使用时与自定义存储绑定的大量外部资源（websockets）。
目前，我通过环绕 subscribe( ) 方法来计算订阅和取消订阅。它按预期工作。但对我来说，这看起来像是一个令人讨厌的黑客攻击。
我的问题：在 Svelte 中是否有一个标准/干净的方法来实现这种行为？
如果没有，在 Javascipt 和 svelte 方面有更多经验的人可以确认这是否合法吗？
演示：https://svelte.dev/repl/f4e24fb5c56f457a94bf9cf645955b9f ?version=3.43.1
import { writable } from 'svelte/store';
// Instanciate the store
export let store = MakeStore();
// By design, I want a function that returns a custom svelte store
export function MakeStore(initialValue = null) {
const { subscribe, set, update } = writable(initialValue);
let subscribercount = 0;
let wsubscribe = function (run, callback) {
subscribercount++;
console.log("subscribercount++", subscribercount);
let wunsubscribe = subscribe(run, …javascript javascript-objects svelte svelte-component svelte-store
svelte ×10
svelte-component ×10
svelte-3 ×5
javascript ×4
svelte-2 ×2
svelte-store ×2
dom ×1
sveltekit ×1
typescript ×1