标签: svelte-3

我正在与 svelte 合作开发一个个人项目（springboot + svelte + heroku）。我很难理解为什么当我尝试重新显示组件时它不刷新：

这是要点：https://svelte.dev/repl/a69ac7502677400081122453aa45dfbb ?version=3.7.1

第一个应用程序显示组件首先单击[前进]显示组件其次。但是，然后单击[向后]并不会像我预期的那样返回组件优先。

我的总体想法是使用 svelte 来管理面向选项卡的应用程序：每个选项卡都是一个组件和子组件。单击选项卡将显示和隐藏选项卡组件。尽管它对于第一个选项卡更改很有效，但接下来会失败。

我很确定有可能出现这种行为，但我想我一定误解了什么......

有人可以解释一下吗？

谢谢

在 Svelte 3.12.1 上，当事件处理程序onFilesChange被触发时，它意外地触发了onFileClick。

<script>
  let files = [];
  function previewImage(file) {
    return "<img src='" + file.previewURL + "' />";
  }
  function onFileClick(file) {
    console.log("onFileClick");
    files.splice(files.findIndex(x => x.name === file.name), 1);
    files = files;
  }
  function onFilesChange(event) {
    console.log("onFilesChange");
    let inputFiles = event.target.files;
    for (var i = 0; i < inputFiles.length; i++)
      files.push({inputFile: inputFiles.item(i), previewURL: URL.createObjectURL(inputFiles.item(i))});
    files = files;
  }
</script>

<input accept="image/*" multiple name="files" type="file" on:change={onFilesChange}/>
{#each files as file}
  <figure on:click={onFileClick(file)}>
    {@html previewImage(file)}
  </figure> …

我正在试用 SveleteJS，但遇到了困难

制作了一个Dashboard组件，并在该组件内部放置了一个白板组件：

<script>
    import Whiteboard from "./Whiteboard.svelte";
    export let name;
</script>

<div class="box part-of-dashboard">
    <Whiteboard lines={[]} />
</div>

Whitebord.svelte:

<script>
    export let lines = [];

    export function addLine() {
        lines.push("blah");
        console.log(lines);
    }

</script>

<div style="background-color:red">
    {#each lines as line}
        <div>
            {line}
        </div>
    {/each}
</div>
<div>
    <button on:click={addLine}>
        Add Line
    </button>
</div>

当我单击按钮时，console.log触发器和我可以看到线条尺寸增加，但我没有看到它在页面上呈现，只有空的红色 div 包裹它。

我尝试过添加$:到不同的地方，但我还不确定在哪里应该使用它，在哪里不应该使用它，并不是说它有什么区别。

我如何让 #each 呈现 div 列表（而且，从 传递数据的正确方法是什么on:click，执行 {addLine('blah')} 在页面加载时执行该 addLine）？

我正在制作一个模态，其属性存储在商店中。而不是像这样打开它，从一个元素：on:click={() => $modal.isOpen = true}

我想这样打开它： on:click={() => $modal.toggle()}从一个元素。

这是我的代码：

export const modal = writable({
    isOpen: false,
    title: 'Title',
    content: 'Content',
    toggle: () => {
        console.log(modal)
        modal.set({ ...modal, isOpen: true });
    }
}); 

当我登录时modal，它只记录set, subscribe, update方法。然后当我再次单击时，这些方法消失了：它正确地覆盖了它们，似乎我永远无法获得模态的初始化状态。我尝试使用this或参数 ( (a, b) =>)访问当前对象，但都没有返回任何内容。

互联网上的好心人大家好，

我为用户的滚动位置创建了一个侦听器： <svelte:window bind:scrollY={y} /> 我想将此变量保存在商店中，以便在整个网站上访问它。但为此我需要一个二传手。有没有一个好的高性能方法来做到这一点？

我尝试了这个，但它不起作用：

  $: () => scrollPos.set(y);
  $: console.log("LOG: scrollPos", $scrollPos);```

在我的应用程序中，我有 Snackbar 组件，该组件在多个其他组件中使用。

目前，我将 Snackbar 组件导入到将使用该组件的每个组件中，并且一切正常

想知道是否可以仅全局导入一次 Snackbar 组件并从任何其他组件访问它，而无需将其显式导入到每个组件中？

我有一个对象数组，在我的代码中我列出了这些

{#each advances as tech}
    <Advance tech={tech} addToCart={addToCart}/>
{/each}

添加到购物车函数更新对象上的变量：

  const addToCart = (tech) =>  {
      tech.Cart = true;
  }

这不会触发反应性，我该怎么做？

我必须构建我的 svelte 应用程序，但在尝试导入“svelte-routing”时总是出现错误

未捕获的错误：模块解析失败：意外的标记 (7:11) 您可能需要适当的加载程序来处理此文件类型

应用程序.svelte

<script>
  import { onMount, onDestroy, setContext } from 'svelte'
  import { Router, Route } from 'svelte-routing'
</script>
<h1>Hello world!</h1>

包.json

{

  "dependencies": {

   "@rails/actioncable": "^6.0.1",

   "@rails/webpacker": "3.5",

   "axios": "^0.19.1",

   "babel-core": "7.0.0-bridge.0",

   "babel-loader": "7.0.0",

   "babel-plugin-lodash": "^3.3.2",

   "babel-plugin-module-resolver": "^3.1.1",

   "babel-plugin-react-transform": "^3.0.0",

   "babel-plugin-transform-react-jsx": "^6.24.1",

   "css-loader": "^3.4.2",

   "sirv-cli": "^0.4.5",

   "svelte": "^3.19.2",

   "svelte-loader": "^2.13.6",

   "svelte-routing": "^1.4.1"

  },

  "devDependencies": {

   "@babel/cli": "^7.0.0-beta.40",

   "@babel/core": "^7.0.0-beta.40",

   "@babel/plugin-proposal-class-properties": "^7.8.3",

   "@babel/plugin-proposal-decorators": "^7.8.3",

   "@babel/preset-env": "^7.0.0-beta.40",

   "@babel/preset-react": "^7.0.0-beta.40",

   "core-js": "3",

   "webpack-bundle-analyzer": "^3.6.0",

   "webpack-dev-server": "^3.9"

  } …

我如何使用 Sapper 定期获取数据？

这是正确的方法吗？

//src/routes/fetch_on_this_page.svelte

<script>
  setInterval(async () => {
    //fetch here
  }, 3000);
</script>

我正在开发一个小型 Svelte 应用程序，用于学习目的（我是 Svelte 新手）。该应用程序使用在视图中显示为 HTML 表格的对象数组：

let countries = [
    { code: "AF", name: "Afghanistan" },
    { code: "AL", name: "Albania" },
    { code: "IL", name: "Israel" }
]; 

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Code</th>
      <th>Name</th>
      <th class="text-right">Actions</th>
    </tr>
  </thead>
  <tbody>
    {#if countries.length}
     {#each countries as c, index}  
      <tr>
       <td>{index+1}</td>
       <td>{c.code}</td>
       <td>{c.name}</td>
       <td class="text-right">
        <button data-code="{c.code}" on:click="{deleteCountry}" class="btn btn-sm btn-danger">Delete</button>
       </td>
      </tr>
     {/each}
    {:else}
    <tr>
      <td colspan="4">There are no countries</td>
    </tr>
    {/if}
  </tbody>
</table>

我正在这样进行删除操作：

function deleteCountry(){
    let …