使用 Svelte 逐步增强表单?
Progressive enhancement of a Form with Svelte?
我有一个 php 页面,其中包含一个工作表单元素,其中包括 select、输入字段等等。
我希望表单在没有 js 的情况下继续工作,但如果 js 可用,我想将标准输入转换为增强的 Svelte 组件。
你会如何处理这个问题?
例如。我如何将 select 标签可用的所有 "options" 传递给将替换它的 svelte 组件?
您可以像处理您在前端使用的任何其他数据一样提供这些选项:
1) 在 javascript 文件中硬编码(不是很灵活,可能不是你需要的)
2) 执行 fetch
并通过 API 从服务器获取数据
3) 将它们作为 属性 添加到 php 中的 window 并在您的 svelte 应用程序中使用它。
window.something = {
selectOptions: [...]
}
将您的 <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}})
我有一个 php 页面,其中包含一个工作表单元素,其中包括 select、输入字段等等。
我希望表单在没有 js 的情况下继续工作,但如果 js 可用,我想将标准输入转换为增强的 Svelte 组件。
你会如何处理这个问题?
例如。我如何将 select 标签可用的所有 "options" 传递给将替换它的 svelte 组件?
您可以像处理您在前端使用的任何其他数据一样提供这些选项:
1) 在 javascript 文件中硬编码(不是很灵活,可能不是你需要的)
2) 执行 fetch
并通过 API 从服务器获取数据
3) 将它们作为 属性 添加到 php 中的 window 并在您的 svelte 应用程序中使用它。
window.something = {
selectOptions: [...]
}
将您的 <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}})