V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
51300520
V2EX  ›  问与答

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

  •  1
     
  •   51300520 · 2019-07-10 05:37:35 +08:00 · 2365 次点击
    这是一个创建于 1965 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    《 html 》
    
    我是 a 模板。
    
    {{template "b.html".}}
    
    《/html 》

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

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

    3 条回复    2019-07-10 07:43:28 +08:00
    zvcs
        1
    zvcs  
       2019-07-10 07:12:28 +08:00 via Android
    b 模板封装成组件,把需要的参数传进去
    Mutoo
        2
    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
        3
    loading  
       2019-07-10 07:43:28 +08:00 via Android
    这里有个 vue 路由例子,可以看看。
    cn.vuejs.org/v2/guide/routing.html

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


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

    如果步子不想太大,可以了解一下这个库。
    github.com/stimulusjs/stimulus
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3345 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:11 · PVG 20:11 · LAX 04:11 · JFK 07:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.