小编Ste*_*ell的帖子

使用 Sapper,如何在出现 404 错误时重定向到索引页面?

对于 404 错误,我不想显示 404 页面。相反,如果用户已登录,我想重定向回索引页面,如果用户已注销,我想重定向回登录页面。如果没有登录,我已经能够将用户从索引页面路由到登录页面,所以我可能只需要重定向到索引页面并让它负责重新路由到登录页面,尽管那样必须进行两次重新路由似乎效率低下。

我可以通过将routes/_error.svelte页面重写为这个来完成它......

<script>
    import { onMount } from 'svelte';
    onMount(() => {window.location.href = '/'});
</script>
Run Code Online (Sandbox Code Playgroud)

但我不是很自信这是完成我想做的事情的最佳方式。它还会重定向所有错误,在未来的项目中,我可能希望显示某些错误,例如 404,但重定向其他错误,例如 500。

有没有人对如何使用 Sapper 更好地实现这一点有所了解?

javascript svelte sapper

10
推荐指数
1
解决办法
5220
查看次数

当我的 props 发生变化时,如何在 Svelte 中强制重新渲染?

我有一个总计组件,需要对多维数组中的多个数组的相同索引进行总计,类似于电子表格中的列总计。我有一个不同的组件,它允许我更改数组中的值,并且还可以对电子表格中的行进行总计。我在更改数组后重新渲染总计组件和/或更新列总计时遇到麻烦。我想我可能需要在总计组件中进行反应式声明,但这似乎不起作用。

这是 REPL 的链接

这是代码:

Totals.svelte

<script>
    export let jobs

      //this creates a new array which is two indexes long for each of the columns
      //then fills each array with the sum of column
      //HOW DO I GET THIS TO UPDATE EACH TIME A JOB HOURS ENTRY IS CHANGED?
    $: totals = new Array(2).fill(null).map((v, i) => {
    let total = 0;
    jobs.jobHours.forEach((v) => {
      total += Number(v[i]);
    });
    return total;
  });

    //this sums the total hours row to give …
Run Code Online (Sandbox Code Playgroud)

javascript svelte

7
推荐指数
1
解决办法
1万
查看次数

使用 svelte/store 更新方法更新对象时是否应该使用扩展运算符?

我正在创建一个使用对象来存储数据的商店。

我可以使用扩展运算符更新商店,但我也可以在不使用扩展运算符的情况下更新它。

Svelte 是否像 React 一样,我应该在更新对象的状态之前使用扩展运算符创建一个新对象,这样我就不会改变原始对象?

withSpreadOperator()或者withoutSpreadOperator()……这就是问题所在。

//stores.js

import { writable } from "svelte/store";

export const counts = writable({ n: 0 });
Run Code Online (Sandbox Code Playgroud)
//App.js

<script>
  import { count } from "./stores.js";

  function withSpreadOperator() {
    count.update(o => {
      let x = { ...o };
      x.n++;
      return x;
    });
  }

  function withoutSpreadOperator() {
    count.update(o => {
      o.n++;
      return o;
    });
  }
</script>

<h1>The count is {$count.n}</h1>
<button on:click="{withSpreadOperator}">+</button>
<button on:click="{withoutSpreadOperator}">+</button>
Run Code Online (Sandbox Code Playgroud)

svelte svelte-store

6
推荐指数
1
解决办法
3605
查看次数

使用 Svelte,如何在 HTML 中转义花括号?

我希望能够在我的 Svelte 组件中显示一个代码示例,但该示例有花括号,即

<script>
//no JS needed
</script>

<p>Here's a sample function</p>
<pre><code>
  function test(e) {
    console.log(e)
  }
</code></pre>
Run Code Online (Sandbox Code Playgroud)

注意函数是如何有花括号的?这似乎让 Svelte 编译器感到困惑。除了这个,还有什么方法可以逃脱吗?

<script>
//no JS needed
</script>

<p>Here's a sample function</p>
<pre><code>
  function test(e) {'{'}
    console.log(e)
  {'}'}
</code></pre>
Run Code Online (Sandbox Code Playgroud)

svelte

5
推荐指数
1
解决办法
2154
查看次数

使用 Svelte,如何使用 Javascript 字符串变量填充 &lt;svelte:head&gt; 中的 &lt;style&gt; 标记?

使用 Svelte,我想要完成的是能够html使用我拥有csspost对象的属性来设计我的样式。

我想,没问题,只需在我的svelte:headwith 中添加一个样式标签{post.css}。它会将我的post.css数据直接放入样式标签中,viola',问题解决了。但是,不,问题没有解决。当我在浏览器中查看元素时,我看到

<style>{post.css}</style>

代替

<style>
  p{
    color: purple;
    font-weight: 900;
  }
 </style>
Run Code Online (Sandbox Code Playgroud)

我创建了一个解决办法,我在那里设置innerText了的<style>后标签onMount,但我不喜欢它,宁愿做它一个更清洁的方式。

我想要的是…

<script>
  export let post = {
    html: `<p>This is purple</p>`,
    css : `
      p{
        color: purple;
        font-weight: 900;
      }
    `
    }  
</script>

<svelte:head>
  <style>{post.css}</style>
</svelte:head>

{@html post.html}
Run Code Online (Sandbox Code Playgroud)

我必须做些什么才能让它发挥作用……

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

  export let post = {
    html: `<p>This is purple</p>`,
    css : …
Run Code Online (Sandbox Code Playgroud)

svelte css-in-js sapper

1
推荐指数
1
解决办法
1126
查看次数

标签 统计

svelte ×5

javascript ×2

sapper ×2

css-in-js ×1

svelte-store ×1