svelte

问题 I am using sapper server routing and this works with individual .js files that will handle a single get, post, etc using the filename as the route and export function post(req,res,next). I would like to use my own server routing like Express with multiple handlers in a single file like... app.post('/api/abc', req,res,next) app.post('/api/def', req,res,next) Is this possible in Sapper and if so can someone please give an example? 回答1: Add the handlers to your server.js: polka() // Or `express(

问题 Creating a web component using svelte, I need to run some code when an attribute of the component is changed. What I have come up with is the following pattern. <script> export let test = "default value"; $: { testIsChanged(test); } function testIsChanged(newValue) { console.log(newValue); } </script> The value of test is {test} Is this the way to do it? Or am I missing something? 回答1: That will indeed work, as you can see in this REPL 来源： https://stackoverflow.com/questions/57976936/howto-do

问题 In the following code, in which submit is a method in an external JavaScript module, is it possible for submit() to access the component object? Component.html <button on:click={submit}>Submit</button> <script> import { submit } from './'; </script> index.js export function submit() { console.log(this); // <button>Submit</button> }; Before Svelte 3, this would be the component object, but in Svelte 3, this seems to be the target element. 来源： https://stackoverflow.com/questions/57571882/access

问题 How to merge node_module , project dependencies, of both Svelte and ReactJs? I've seen guides showing how to include ReactJS file into a Svelte app <SvelteComponent this={First} {...this.props}/> That produces the following error: Constructor is not a Constructor error 回答1: Svelte and React are not compatible to import and use the other framework component directly. It is definitely possible to create a Svelte app inside of a React app or vice-versa though. You would have to instantiate the

问题 I am making an if block per the Svelte Guide for if blocks. It seems simple enough, but Svelte thinks it's a syntax error: [!] (svelte plugin) ParseError: Unexpected character '#' public\js\templates\works.html 3: <div class="slides js_slides"> 4: {#each works as work, index} 5: <div class="js_slide {#if index === currentIndex }selected{/if} {#if index === 0 }first{/if}"> ^ 6: <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/> 7: </div> Why isn't {

问题 There are many components that still require JQuery that I need to use (unfortunately). What is the best way to do this in Svelte/Sapper? Should I use ES6 Imports, modify rollup, or what is the best approach? For example, I need to include a pivot table, grid, scheduler, etc from DevExpress or Kendo UI. I can pull in JQuery globally in the template.html file and get things to work, but I'm sure this is not the best way. 回答1: Including it as a <script> in template.html is fine. Alternatively,

问题 I'm trying to implement a fairly standard blog app using Svelte, Svelte Routing and Firestore, but I think I'm misunderstanding a fundamental part of how props are passed between components. I based my initial code on the excellent tutorial on Fireship.io - which worked as per the tutorial: https://fireship.io/lessons/svelte-v3-overview-firebase/ From there I've added Svelte Routing - https://github.com/EmilTholin/svelte-routing - and I'm attempting to add a view route. Relevant part of App

问题 I use #each to display an input for every member of the tasks array. When I click the Add task button, a new element is inserted into the array, so a new input appears in the #each loop. How do I focus the input that's been added upon clicking the Add task button? <script> let tasks = []; function addTask() { tasks = [...tasks, { title: "" }]; } </script> {#each tasks as task} <input type="text" bind:value={task.title} /> {/each} <button on:click={addTask}>Add task</button> 回答1: Rich Harris

问题 So today I discovered Svelte and I absolutley love the concept. I only got one problem I wrote a small helper.js file and can't seem to import it. Every time I try to reference the class I get ReferenceError: Helper is not defined main.js file: import App from './App.svelte'; import './helper.js'; var app = new App({ target: document.body }); export default app; App.svelte file: <script> let helper = new Helper(); </script> <h1>Hello</h1> helper.js file: class Helper { constructor() { console

问题 In Svelte, how should classes be changed on elements depending upon component state? For instance, you may wish to apply a class to a button under certain conditions, as in the following example. <button class="{{class}}"> Right now, this can be achieved by creating a computed property which would return class names, or empty strings, under certain conditions. However, I am concerned over whether this might be polluting the computed properties namespace. For instance, if there were a status ,