Question

我刚刚开始使用templates:tabs package用于Meteor。默认情况下，这会生成一个插入为{{#basicTabs tabs=tabs}}的自定义模板。

我制作了一个简单的应用程序，以了解这种自定义模板的工作原理，特别是了解它与使用{{＆gt;定制}}

HTML：

<body>
  {{> parent1}}
  {{> parent2}}
</body>

<template name="parent1">
  <h1>Parent 1</h1>
  {{> child}}
</template>

<template name="parent2">
  <h1>Parent 2</h1>
  {{#child}}
    <h2>Stuff inside "child" tag</h2>
  {{/child}}
</template>

<template name="child">
  <button type="button">Child button</button>
</template>

JS：

if (Meteor.isClient) {
  Template.child.events({
    'click button': function (event, template) {
       console.log("child", event, template)
    }
  });
  Template.parent1.events({
    'click button': function (event, template) {
      console.log("parent1", event, template)
    }
  });
  Template.parent2.events({
    'click button': function (event, template) {
      console.log("parent2", event, template)
    }
  });
}

我没有看到任何Stuff inside the "child" tag出现。当我点击一个按钮时，我可以在浏览器控制台中看到父模板和子模板都可以对输入作出反应，但在两种情况下都会发生这种情况。

我应该如何使用{{#custom}} ... {{/custom}}语法？

修改

以下是更新的文件，其中显示{{#child}}块的工作方式，与events和helpers相关：

<body>
  {{> parent1}}
  {{> parent2}}
</body>

<template name="parent1">
  <h1>Parent 1</h1>
  {{> child}}
</template>

<template name="parent2">
  <h1>Parent 2</h1>
  {{#child}}
    <h2>Stuff inside "child" tag</h2>
  {{else}}
    <h3>Other stuff</h3>
  {{/child}}
</template>

<template name="child">
  {{extras}}
  {{> Template.contentBlock}}
  {{> Template.elseBlock}}
  <button type="button">Child button</button>
</template>

JS：

if (Meteor.isClient) {
  Template.child.events({
    'click button': function (event, template) {
       console.log("child", event, template)
    }
  });
  Template.parent1.events({
    'click button': function (event, template) {
      console.log("parent1", event, template)
    }
  });
  Template.parent2.events({
    'click button': function (event, template) {
      console.log("parent2", event, template)
    }
  });

  Template.child.helpers({
    extras: function () {
      return "Child extras"
    }
  })
  Template.parent1.helpers({
    extras: function () {
      return "Parent 1 extras"
    }
  })
  Template.parent2.helpers({
    extras: function () {
      return "Parent 2 extras"
    }
  })
}

使用Meteor 1.2.0.2输出：

家长1

儿童演员[儿童按钮]

家长2

儿童演员

“儿童”标签内的东西

其他内容

[儿童按钮]

Answer 1

似乎你唯一缺少的是Template.contentBlock，即

<template name="child">
  <button type="button">Child button</button>
  {{> Template.contentBlock}}
</template>

您可以将其视为能够呈现child模板的用户放置在{{#child}}..{{/child}}块内的任何帮助。

回到你的问题，{{> child}}和{{#child}}之间的主要区别在于前者的Template.contentBlock等于null。为了您的信息，还有另一个助手Template.elseContentBlock代表放置在{{else}}＆＃34;标记＆＃34;之后的标记部分，例如

{{#child}}
   this content goes to Template.contentBlock
{{else}}
   this content goes to Template.elseContentBlock
{{/child}}

您可以使用它来让child模板根据某些上下文选择要呈现的内容，如示例here中所示。

在您的问题中没有直接指出，但要记住的另一件事是，如果您使用块语法{{#child}}，则块的内容可以访问您的parent模板的帮助程序，无法访问child模板的帮助程序。

在Meteor中使用{[#custom}}内容{{/ custom}}

1 个答案: