标签: svelte-3

我正在 Svelte 方法的帮助下迭代 JSON onMount。我已将数据显示在表格中。

<script>
    import { onMount } from "svelte";

    const apiURL = "https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";        
    let countries = [];
    
    onMount(async function() {
       const response = await fetch(apiURL);
       countries = await response.json();
    });

</script>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    {#if countries}
     {#each countries as country }  
     <tr>
      <td>{index + 1}</td>
      <td>{country.name}</td>
      <td>{country.code}</td>
     </tr>
     {/each}
    {:else}
    <p>There are no countries</p>
    {/if}
  </tbody>
</table>

我无法做的是添加迭代计数列。使用{index + 1}。

我怎样才能得到想要的结果？

有没有办法将 svelte store 与 React.js 一起使用。我真的很喜欢它的简单性以及它的替换方式switch case。这是 svelte 文档中的示例代码。

import { writable } from 'svelte/store';

function createCount() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe,
        increment: () => {},
        decrement: () => {},
        reset: () => {}
    };
}

export const count = createCount();

例如来自文档的这个：

<canvas
    width={32}
    height={32}
></canvas>

花括号在这里有什么作用？

我不知道为什么这个不更新。我对 Svelte 比较陌生，但我知道使用 thing = thing 方法强制更新对象数组。

不过，我不确定为什么这不会重新渲染？我首先将其作为矩阵，我认为可能有一些嵌套破坏了它，但现在这实际上只是一个平面数组。它在点击时更新矩阵，但不触发重新渲染。

<script>
    import Nested from './Nested.svelte';
    let matrix = new Array(9).fill(null)
    let turn = 0
    
    let handleChange = (index) => {
        if (matrix[index] != null) return
        let newColor = turn % 2 == 0 ? 'red' : 'blue'
        matrix[index]= newColor
        turn++
        matrix = matrix
    }
</script>
    {#each matrix as team, index}
        <Nested team={team} index={index} click={handleChange}/>
        {#if (index==2 || index==5)}
            <br />
        {/if}
    {/each}

嵌套组件：

<script>
    export let index;
    export let click;
    export let …

这里是 REPL：https://svelte.dev/repl/56770fec88af4b76bdc8ea962178854e ?version=3.42.1

这里是代码：

应用程序.svelte：

<script>
    import {editableStore} from "./store";
    
    let name = "John"

    $: player = editableStore(name);
</script>

<h1>Hello {$player.name}!</h1>

<button on:click={() => name = (name === "Bob" ? "Jerry" : "Bob")}>
    Change name
</button>

<h2>Log:</h2>

{#each $player.log as log}
    <li>{log}</li>
{/each}

商店.js：

import {writable} from "svelte/store";

const defaultStore = {
    name: "Bob",
    age: 18,
    log: []
};

export const editableStore = (name) => {
    console.log("Recreated with name:", name);

    const {subscribe, update} = writable({...defaultStore}, () => () => …

您好，我有一个测验应用程序，可以循环选择题。我循环使用的选择使用按钮{#each}。

我试图在单击按钮后禁用 1 个按钮，但没有成功。

如何在 Svelte 中单击按钮后禁用单个按钮？

let isCorrect
let isAnswered = false
let isDisabled = false

function checkAnswer(correct) {
    isCorrect = correct
    isAnswered = true
    isDisabled = true
    if(isCorrect) {
      addPoint()
    }
  }

let all_answers = [
  {answer: 'Elton John', correct: false},
  {answer: 'Andrew Gold', correct: true}, 
  {answer: 'Leo Sayer', correct: false},  
  {answer: 'Barry White ', correct: false}
]

{#each all_answers as answer}
  <button on:click={() => checkAnswer(answer.correct)}>
    {@html answer.answer} 
  </button>
{/each}

在 Parent.svelte 中：

<Child {initialName}/>

在Child.svelte中

export let initialName;
<p>{initialName}</p>

这工作正常，initialName 是根据从 Parent 传递的值呈现的。但我想稍后将其映射到存储中的反应变量（一旦呈现初始合成）。

import {_name} from './store.js';

$: initialName = $_name;

不起作用，因为初始名称将立即被存储中的值覆盖。目前我正在执行以下解决方法。

let initialized = false;
let l_name;
$: if (true || $_name) {
    if (initialized) {
        l_name = $_name;
    } else {
        l_name = initialName;
        initialized = true;
    }
}

<p>{l_name}</p>

这可行，但我发现它有点老套，而且样板太多。还有其他干净的方法来完成同样的任务吗？一种选择是直接设置值来存储（在父组件中）并使用它<p>$_name</p>。但是，当我刷新页面一瞬间时，这会导致保留存储中的旧值的问题。

我有一个静态 HTML 文件，想用动态 Svelte 组件来增强它：

<ul id="list">
    <li>first</li>
    <!-- dynamic list items should be added in between static ones -->
    <li>last</li>
</ul>

（这是一个简化的示例；“第一个”和“最后一个”元素更复杂，无法在 Svelte 中重新生成它们。）

import List from "./List.svelte";

new List({
    target: document.querySelector("#list"),
    props: {
        items: ["foo", "bar"]
    }
});

<script>
let items;
</script>

{#each items as item}
<li>{item}</li>
{/each}

但这会将动态项目附加到列表的末尾。有没有一种惯用的、声明性的方式将它们插入到中间？

我能想到的唯一解决方案是繁琐的、非声明性的 DOM 操作：

<script>
import { onMount } from "svelte";

let items;

onMount(() => {
    let container = ref.parentNode;
    container.removeChild(ref);
    // manually change order
    let last = container.querySelectorAll("li")[1];
    container.appendChild(last); …

我想知道如何使用 Svelte 从函数转发事件。

例如，我有一个App.svelte和一个Component.svelte文件。 Component.svelte是一个按钮组件。我想像这样处理on:click事件：

<script>
   function handle(e){ /** Do things */ -  /** Forward Event */ }
</script>

<button on:click={handle}/>

所以我也可以从App.svelte文件中获取事件

<script>
   import Button from './component.svelte'

   function handle(e){ /** Do something */ }
</script>

<div>
   <Button on:click={handle}/>
</div>

我知道您可以通过填充on:click属性而不指定要调用的函数来转发component.svelte文件内的事件。但就我而言，我需要在组件内部进行一些内部逻辑。或者我真的需要为此创建自定义事件处理程序吗？