javascript - Express 上 Jade 模板继承与外部模块的好策略

标签 javascript node.js inheritance express pug

我正在开发一个框架,开发人员可以在其中在外部模块中实现子模板。我想稍后将该模板包含在父模板中。

这是一个基本的模板架构:

─ mission (parent template)
├─ succeed mission (child template)
├─ failed mission (child template)
└─ play mission (child template)

每个人的父模板都是一样的。子模板由贡献者实现,并始终显示在不同的时刻(任务状态)。

我在一个模板文件中尝试了两种方法。

实现“ block ”模式:

block mission_play
  h2 Hello world!
  p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
block mission_succeed
  h2 Congratulations!
  p You won buddy!
block mission_failed
  h2 Oh my gosh, dude, you did something realy bad
  p You should try again

那个不行,因为我没有任何 extend layout 指令(我不能使用它,因为每个子模板都是一个外部模块)。 有没有办法手动指示 jade 扩展了哪个模板?

在混入中实现每个子模板:

mixin mission_introduction(mission)
  h2 Hello world!
  p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

mixin mission_succeed(mission)
  h2 Congratulations!
  p You win buddy!

mixin mission_failed(mission)
  h2 Oh my gosh dude, you did something realy bad
  p You should try again

我打算将该模板包含在其父模板中,但 Jade 不允许在包含路径中使用表达式。这就是为什么我尝试直接在父 jade 模板中解释 jade 代码但我没有找到如何。我什至试图将它包含在 partial function 中但我可以在不禁用 Express 中的默认 View 继承策略的情况下使用该模块。

那么我哪里错了?建筑之王的最佳策略是什么?

干杯!

最佳答案

我终于找到了一个好策略:

case mission.state
    when "game"
      block mission_introduction   
        h2 Hello world!
        p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    when "succeed"
      block mission_succeed  
        h2 Congratulations!
        p You win buddy!              

    when "failed"
      block mission_failed                                    
        h2 Oh my gosh dude, you did something realy bad
        p You should try again

干杯!

关于javascript - Express 上 Jade 模板继承与外部模块的好策略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12175119/

相关文章:

javascript - 通过localStorage实现StorageEvent

Javascript继承思想?

java - 我能从Java中的父类(super class)中知道扩展类吗?

javascript - 什么是 JavaScript 中不纯函数的例子

javascript - 如何将变量从剑道网格传递到模板函数

javascript - 如何在没有服务器端语言的情况下开发动态网站?

javascript - 使用 sequelize 根据 express.js 中的路由更改数据库连接

javascript - 抓取: Get Link that is only visible on the website not in the html

javascript - ES6 JS 类中的属性继承

javascript - 从模块中导出 { default } 不适用于 Jest 中的 Babel 7 和 preset-env