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

时间:2012-10-24 16:39:55

标签: pug

我的结构如下:

你有一个名为“heading”的标题,它看起来像这样

div.span4
    block headingleft
div.span3
    block headingright

我想要实现的是,从我的主页面我想传递headingleft和向右标题的块值,例如

div
include heading
    block headingleft
          a IamLeft 
    block headingright
          a IamRight

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

1 个答案:

答案 0 :(得分:9)

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

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

<强>包括

使用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并涵盖整个页面生成可能是有意义的。

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