请问前后端分离用的 html 模板怎么动态嵌套？

2019-07-10 05:37:35 +08:00
 51300520

一般这种是一个主模板嵌其他模板，比如 a 模板嵌 b 模板

《 html 》

我是 a 模板。

{{template "b.html".}}

《/html 》

可是问题是我 a 还有可能嵌其他各种模板，所以这句{{template "b.html".}}是不能写死的

请问根据条件动态嵌别的模板该怎么写啊？如果子模板的数量未知，将来会添加，但是每次可以传参子模板的名称

2389 次点击
所在节点    问与答
3 条回复
zvcs
2019-07-10 07:12:28 +08:00
b 模板封装成组件，把需要的参数传进去
Mutoo
2019-07-10 07:17:24 +08:00
两个思路：
1) 控制反转，将主模板作为布局，被子模版使用。（不是所有模板引擎都支持布局，选用的时候需要考虑这点）

layout.html
<html><body><header /><main><!--slot--></main><footer /></body></html>

page.html
{{layout "layout.html"}}
<div>this conent will be embed in <main> slot</div>

2) 引入前端路由，由前端路由动态加载页面。
loading
2019-07-10 07:43:28 +08:00
这里有个 vue 路由例子，可以看看。
cn.vuejs.org/v2/guide/routing.html

你可以看到前三行就是模板，然后紧接着就是判断路径(可以理解为你说得变量)，然后就使用对应的模板。


嵌套多了就是一个 spa 应用了，其实本质还是用变量判断。

如果步子不想太大，可以了解一下这个库。
github.com/stimulusjs/stimulus

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/581552

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX