使用 Svelte 逐步增强表单？答案

【问题标题】：Progressive enhancement of a Form with Svelte?使用 Svelte 逐步增强表单？
【发布时间】：2019-10-04 07:31:54
【问题描述】：

我有一个带有工作表单元素的 php 页面，其中包括选择、输入字段等..
我希望表单在没有 js 的情况下继续工作，但如果 js 可用，我想将标准输入转换为增强的 Svelte 组件。
你会如何处理这个问题？
例如。如何将可用于选择标签的所有“选项”传递给将替换它的苗条组件？

【问题讨论】：

标签： svelte progressive-enhancement svelte-component svelte-3

【解决方案1】：

将您的<form> 包装在<div> 中。当 JS 加载完毕后，它可以查找包装器并将其替换为 Svelte 组件。

import App from './App.svelte'

// get the wrapping <div> element
const wrapper = document.querySelector('.form-wrapper')

// mount your app into the wrapper div
new App({target: wrapper})

如果您想通过props 传递选项列表，只需在构造组件之前从 DOM 中拉取它们：

import App from './App.svelte'

const wrapper = document.querySelector('.form-wrapper')

// get <select> element
const select = wrapper.querySelector('select')

// iterate `<option>` tags and extract `value` and `label`
const options = [...select.options].map(option => ({value: option.value, label: option.innerText}))

// pass `options` as `props`
new App({target: wrapper, props: {options}})

【讨论】：

这种方法的问题是 1）现在有必要维护两个 HTML（在 PHP 和 Svelte 组件上）和 2）当用 Svelte 表单数据替换 DOM 时，输入可能会丢失失去焦点。

【解决方案2】：

您可以像在前端使用的任何其他数据一样使这些选项可用： 1）在javascript文件中硬编码（不是很灵活，可能不是你需要的） 2) 执行fetch 并通过 API 从服务器获取数据 3) 将它们作为属性添加到 php 中的窗口并在您的苗条应用程序中使用。

window.something = {
  selectOptions: [...]
}

【讨论】：