通过go webserver使用嵌套组件服务Svelte MPA

iezvtpos 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(89)

我想创建一个多页的应用程序，其中个别网站是从苗条的组成部分。这些页面由模板引擎构建，并通过go服务器提供服务。
我遵循了一个写的& youtube tutorial，它指示我添加customElement编译器选项，修改main.js以导入相应的svelte组件，设置go服务器和模板引擎。

svelte({
    compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
        customElement: true,
    }
}),

这是一个很好的例子。

{{define "body"}}
    <td-explorer></td-explorer>
{{end}}

以下是Svelte组件：

// Explorer.svelte
<script>
  import {Tile} from "carbon-components-svelte";
</script>

<svelte:options tag="td-explorer"/>
<div>
  <p>asdf</p>
  <Tile></Tile>
</div>

下面是呈现模板的处理程序：

func IndexPage(w http.ResponseWriter, r *http.Request) {
    base := filepath.Join("./backend/server/webserver/templates", "base.html")
    index := filepath.Join("./backend/server/webserver/templates", "index.html")

    tmpl, _ := template.ParseFiles(base, index)
    tmpl.ExecuteTemplate(w, "base", nil)
}

网站如预期的那样提供服务。所有静态资源均可访问。

问题是，一旦customElement组件td-explorer包含另一个组件（例如<Tile>，它是ui库的一部分），服务器就只显示一个空白页面。如果我删除这个嵌套组件，我们的td-explorer将按预期呈现，显示“asdf”。

go

来源：https://stackoverflow.com/questions/70637254/serving-svelte-mpa-with-nested-components-via-go-webserver

1条答案

按热度按时间

mnemlml81#

我用这个Svelte-MPA
因此，任何服务器端语言（例如使用ZTemplate）都会在需要初始数据时为Svelte生成的HTML注入JSON，如果不需要初始数据，您可以创建一个.svelte文件（页面），它会在build/watch上生成HTML，对于任何其他以下划线开头的.svelte文件或以下划线开头的文件夹，它将成为一个可以由其他svelte页面导入的svelte组件。
因此，要做到这一点，您只需要在页面级别而不是组件级别注入，然后导入并使用组件。
例如：

<script>
  importy MyComponent from './_myComponent.svelte'
  let myData = [/* myData */]
<script>

{#each myData as row}
  <MyComponent row={row} />
{/each}

服务器端呈现可以是这样的：

ctx.Render("myPage.html", M.SX{ // map[string]any
   myData: []MyStruct{ {A: 1, B: 2}, {A: 3, B: 4} },
})

其中myPage.html由myPage.svelte生成
可以在这里找到示例：https://github.com/kokizzu/sveltefiber/blob/main/main.go#L26
或者更复杂的例子：https://github.com/kokizzu/street/blob/master/presentation/web_static.go#L25

赞(0）回复(0）举报 2023-09-28

我来回答

通过go webserver使用嵌套组件服务Svelte MPA

1条答案

相关问题

热门标签

最新问答