使用苗条的渐进式增强形式?

Question

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

Answer 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}})

Answer 2

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

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