Jade 3.x模板：将块传递给include

Question

6

我的结构如下：

我有一个名为“heading”的模板，它看起来像这样：

div.span4
    block headingleft
div.span3
    block headingright

我想要实现的是，从我的主页面传递块值到左标题和右标题，即像这样：

div
include heading
    block headingleft
          a IamLeft 
    block headingright
          a IamRight

但是代码的行为是：它不是将"IamLeft"放在 .span4 中，而是将 IamRight 和 IamLeft 都放在 .span3 下，就好像它只是一个普通的jade append一样。

- user1583920

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- matthias · Accepted Answer

我会尝试翻译并解释一些必要的内容，因为您可能混淆了一些Jade技巧，并被“blocks”定义所困扰。

我将给出两个针对您使用场景的示例（稍作修改）：

包含

使用include技术意味着您将主（布局）模板的内容替换为其他模板文件的内容。当包含其他jade模板文件时，您可以向包含文件传递额外的内容以附加或在某些位置产生收益。

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

现在，使用包含、块或两者结合的不同情况和要求用于组合视图（这是一种哲学！）。使用继承是消除几个“主文件”重复的好方法 - 或某种控制器基础的视图组合技术定义占位符变量（或任何其他东西），这通常会导致混乱的代码，不遵循“关注点分离”的方法。