Jade 3.x模板:传递块以包含

Question

我的结构如下:

嗨有一个标题称为"标题"的模板,它看起来像这样

div.span4
    block headingleft
div.span3
    block headingright

我想要实现的是,从我的主页面我想传递headingleft和向右标题的块值,即类似的东西

div
include heading
    block headingleft
          a IamLeft 
    block headingright
          a IamRight

但代码的行为是:而不是将"IamLeft"放在.span4中,而将IamRight放在.span3中,而不是将它们放在.span3下,好像它只是普通的玉石追加

Answer 1

我会试一试并解释一些必需品,因为你可能会混淆一些玉器技术,并对"块"的定义感到困惑.

我将给出两个针对您的用例的示例(稍作修改):

包括

使用include技术意味着您可以用其他模板文件的内容替换主(布局)模板的内容.当包含其他玉石模板文件时,您可以将其他内容传递到包含的文件,以便在某个地方追加或屈服.

main.jade:

div
  include heading
    div.span3
      a IamSomewhatRight

heading.jade:

div.span4
  a IamLeft
div.span3
  a IamRight

结果:

 div
   div.span4
     a IamLeft
   div.span3
     a IamRight
   div.span3
      a IamSomewhatRight

如您所见,附加和可选内容(即下面的块)include heading默认附加到包含文件的内容.使用关键字yield来定义替换的确切位置.请注意,这与由关键字定义的块定义无关,block如下所述.

块

如果在主模板中定义块,则可以扩展此模板以供具体使用,并描述如何替换这些块 - 这是在您继承的模板中完成的:

main.jade:

div
  block headingleft
  block headingright

heading.jade:

extends main

block headingleft
  div.span4
    a IamLeft 

block headingright
  div.span3
    a IamRight
  div.span3
    a IamSomewhatRight

结果与"包含"示例中的结果完全相同.当然,将你heading.jade转化为一些myview.jade并涵盖整个页面生成可能是有意义的.

现在,有不同的情况和要求使用包含或块或两者组合以各种方式组成您的视图(这是一种哲学!).在我看来,使用继承是一种很好的方法来消除几个"主文件"的重复 - 或某种基于控制器的视图组合技术定义占位符变量(或者无论如何),这通常导致杂乱的代码不遵循"关注点分离"方法.