Svelte 组件渲染

从 Twig 内部 渲染 Svelte

构建了一个 Svelte 组件？在 Twig 中快速轻松地渲染它并传入动态 props。

composer require symfony/ux-svelte

阅读文档

assets/svelte/src/controllers/PackageSearch.svelte 
<script>
    import PackageList from '../components/PackageList.js';

    export let packages = [];
    let search = '';

    $: filteredPackages = packages.filter(
        uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase())
    );
</script>

<div>
    <input
        bind:value={search}
        class='form-control'
        type='search'
        placeholder='This search is built in Svelte!'
    />
    <div class='mt-3'>
        <PackageList packages={filteredPackages} />
    </div>
</div>
templates/ux_packages/svelte.html.twig 
{% extends 'base.html.twig' %}

{% block body %}
    <div {{ svelte_component('PackageSearch', {packages: packagesData}) }}>
        Loading...
    </div>
{% endblock %}
Symfony logo

UX Svelte

加载中...

安装它

$ composer require symfony/ux-svelte