标签: svelte-3

我正在尝试使用 Svelte.js 和 Ionic v4 构建一个移动应用程序。

1）我得到了苗条的模板。

2) 使用 npm install @ionic/core@latest --save 安装 ionic。

3) 安装 postcss 并在 global.css 中导入 @ionic css

Rollup 正在提取 @ionic css，但它的工作方式似乎有问题。离子成分是可访问的，但我什么也看不到。未正确应用 css。

有没有人设法让 Svelte 与 Ionic v4 一起工作？或者至少，带有一些香草 js 的 Ionic？

• 语境

在我的 Svelte 应用程序中，我有多个页面，每个页面显示一个或多个视频。为了渲染视频，我重用了视频组件（简化）：

// video component
<video poster="{source.thumb}">
    <source type="{source.mime}" src="{source.source}" >
</video>

主页面通过api接收视频内容并调用视频组件：

// calling video component on main page
<script>
    let source = {
        thumb: 'thumb.jpg',
        source: 'video.mp4',
        mime: 'video/mp4',
    };
</script>
<Video source={source} />

一切正常，视频已渲染并可以播放。

• 问题

但：当我导航或想要用另一个视频替换一个视频时，旧的视频元素以某种方式仍然存在并且播放继续。

我可以用来beforeUpdate()暂停视频。但随后，新视频奇怪地在完全相同的播放时间加载，一切都变得混乱。或者，如果我删除 中的视频元素beforeUpdate()，它不会填充新信息。

这有点道理，因为video媒体元素保持完全相同，而只有属性和内容发生变化。因此，状态和已经缓冲的源仍然存在。

我以某种方式需要确保，当数据发生变化时，视频组件必须完全重新安装。 有谁知道这是怎么做到的吗？谢谢！

我喜欢 Svelte，但我坚持一些基本的东西（虽然只是装饰性的）。下面的代码应该在两个元素之间平滑过渡，但它会“跳跃”——显然是在传入元素到达之前为传入元素腾出空间。

这个问题类似于这一个里奇·哈里斯指出，几年前，但我没有看到一个解决方案实施。Svelte 教程站点上的所有示例仅转换单个元素。

这是基本的标记/代码：

{#if div1}
    <div 
      in:fly={{ x: 100, duration: 400, delay: 400 }}
      out:fly={{ x: 100, duration: 400 }}>Div 1</div>
{:else}
    <div 
      in:fly={{ x: 100, duration: 400, delay: 400 }}
      out:fly={{ x: 100, duration: 400 }}>Div 2</div>
{/if}

<button on:click={()=>{ div1 = !div1}}>Switch</button>

Vue 中的工作等效项是：

<transition name="fly" mode="out-in">
    <div v-if="div1">Div 1</div>
    <div v-else>Div 2</div>
</transition>

这是一个代码沙盒示例。您可以看到按钮向下跳，为新元素腾出空间。我添加了一个等于 400 持续时间的“输入”转换延迟（我知道这是默认设置，但为了清楚起见，我想明确设置它）。延迟应该允许第一个元素在转换下一个元素之前转换出，如第一个链接中所述（哈里斯称之为“延迟的hacky使用”）并建议here。

我还尝试将被 outro'd 的元素显式设置为 position: absolute 以便它不会占用空间。这是一个（仍然无法正常工作）示例。看起来有点不优雅，即使它正在工作。出于某种原因，转换会覆盖设置一个设置 position:absolute 的类。

任何帮助是极大的赞赏！ …

我想在具有自定义主题的 Svelte (v3) 项目中使用 Bootstrap (v4.5)。

bootstrap 文档指出您可以使用 scss 执行此操作。所以我设置了 Sveltesvelte-preprocess如下：

添加到我的package.json：

    "bootstrap": "^4.5.2",
    "node-sass": "^4.14.1",
    "svelte-preprocess": "^4.0.10",

在我的rollup.config.js：

...
import preprocess from "svelte-preprocess";

export default {
  ...,
  plugins: [
    ...,
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: (css) => {
        css.write("public/build/bundle.css");
      },
      preprocess: preprocess(),
    }),

在我的App组件中：

<style type="text/scss" …

在 Svelte 应用程序中，我有以下国家/地区数组：

let countries = [
    {
        name:"Alegeria",
        status: "1"
    },
    {
        name:"Bulgaria",
        status :"0"
    }
]

请注意，该status属性是一个字符串。我这样迭代数组：

{#if countries.length > 0}
<table class="table">
    <thead>
        <tr>
            <th>Country</th>
            <th class="text-right">Status</th>
        </tr>
    </thead>
    <tbody>
        {#each countries as c}  
        <tr>
            <td>{c.name}</td>
            <td class="text-right"><Switch bind:checked={Boolean(Number(c.status))} /></td>
        </tr>
    {/each}
    </tbody>
</table>
{:else}
<p class="alert alert-danger">No countries found</p>
{/if}

status正如您所看到的，我尝试使用 将该属性的值转换为布尔值 this Boolean(Number(c.status))。

我没有得到所需的转换，而是收到错误：Can only bind to an identifier (e.g. foo) or a member expression正如REPL显示的那样。

我究竟做错了什么？

我正在开发一个组件，我需要使用它的上下文。但我不知道为什么当我使用 getContext 时，它是未定义的。

这是我在第一个组件（索引组件）上的代码的一部分：

import { setContext } from 'svelte';
import {onMount} from "svelte";

let tempSuggest;

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest = Object.assign({}, suggestModel);

onMount(() => {
   setContext(clientProductSuggest, tempSuggest);
});

在第一个组件的html代码中（在索引文件末尾加载子组件）：

<svelte:component this={component} {...props}/>

在第二个组件中：

import { getContext } from 'svelte';
const c = getContext('clientProductSuggest');

console.log(c);

现在上下文未定义。

我会尽量简短。我有主要组件 app.svelte。在其中我使用了一个名为 Course.svelte 的子组件。我使用 {#each} 块多次重复同一组件。问题是我希望 app.svelte 知道每当单个组件打开时：单击。现在我正在处理 Course.svelte 组件中的 on:click 事件。这样，App.svelte 将永远不会知道这一点。我应该怎么办？

Course.svelte 的片段以及我如何处理 on:click 事件：

<script>
  function handleClick() {
    if (state == courseStates.CLOSED) {
      //Handle closed course
    } else {
      if (state === courseStates.READY) {
        passCourse();
      } else if (state === courseStates.PASS) {
        failCourse();
      }
    }
  }
  function passCourse() {
    state = courseStates.PASS;
  }
  function failCourse() {
    state = courseStates.READY;
  }
</script>

<div on:click={handleClick} class="text-center course btn {buttonClass}">
  <h1>{name}</h1>
  <h4>{code} - {credit} Credit Hours - Term {term}</h4>
</div> …

我有一个场景，我需要向组件类提供信息，以便下游实例化可以使用该信息。

例如：

import { AComponent } from 'AComponent.svelte'
...
AComponent.classInfo = {something: somedata}

然后，该组件可以访问该信息，如下所示：

<script>
  let something = AComponent.classInfo.something
</script>

似乎在 V2 中提供此类功能（我正在使用 3）方面做出了一些努力，这些问题已在这些问题中进​​行了讨论：支持组件静态方法 #480，这导致添加了可以提供静态方法/属性的设置功能。第572章

然而，扫描当前文档发现没有这样的设置方法。那么，这是否从 V2 到 3 都存在？如果没有，是否有办法做到这一点？

我在我的 svelte 项目中使用 Typescript，我需要为我的事件定义强类型。但我找不到任何方法可以做到这一点。

<script lang="ts">
  const onKeyUp = (event: [type here]) => {
    console.log({ event })
    // const {target, keyCode} = event
  }
</script>
<input type="text" on:keyup={onKeyUp} />

任何人都可以帮助我！

在 Svelte 组件中，我尝试访问我在汇总配置文件中设置的对象。我的rollup.config.js文件如下所示：

import replace from '@rollup/plugin-replace';

...
export default {
...
    replace({
        foo: JSON.stringify({ bar: 'Hello' }),
    }),

...

在我的 Svelte 组件中，有一个简单的console.log(foo)工作原理：

但是当我尝试进入 foo 对象时console.log(foo.bar)，我得到foo is not Defined：