流星模板。如何不渲染基于 {{#if}} 的 HTML 元素？

Question

我有一个存储公司电话号码的集合。 如果一家公司有电话号码，请画出这些电话号码。 如果公司没有电话号码，就不要画。

目前它只工作了一半。如果集合中没有号码，它不会绘制电话号码，但它仍然会绘制 Phone 标题，我不希望它这样做。

代码如下：

<template name="orgPage">
    <h2>Organisation Name: {{name}}</h2>
    <h3>Contact Details</h3>
    <ul>
        {{#if phone}}
            <h4>Phone</h4>
            {{#each phone}}
                <li>{{number}} ({{type}})</li>
            {{/each}}
        {{else}}
            <p>No contact numbers</p>
        {{/if}}  
    </ul>
</template>

和

Template.orgPage.helpers({

    'phone': function() {
        return organisationsPhoneNumbers.find({ orgId: currentOrgId })
    }

});

如果集合没有返回数据，我怎样才能让它不绘制

Phone

？

Answer 1

简短回答

保留所有原始代码并将{{#if phone}} 替换为{{#if phone.count}}

长答案

空格键有一个非常酷的path evaluation 功能，最好用一个例子来解释。

假设您在当前上下文中有一个post 文档。每个post 是modeled 都有一个fetchAuthor 帮助器，它返回一个用户文档。假设您需要作者姓氏的小写版本。在 JavaScript 中，您可以编写如下内容：

post.fetchAuthor().profile.firstName.toLowerCase()

现在，如果我们需要模板中的值，我们可以编写：

{{post.fetchAuthor.profile.firstName.toLowerCase}}

当空格键评估路径中的每个标识符时，它会检查它是否是一个函数 - 如果是，它会调用它。请注意，这仅在被调用函数不带参数时才有效。

回到我们原来的例子，phone 助手返回一个游标，它有一个count 函数。我们可以写成{{#if phone.count}}，空格键会发现我们的意思是phone.count()，因为count是一个函数。

Answer 2

我很早就遇到了这个问题，这是一个简单的方法，您可以从帮助程序返回一个包含计数的对象：

js:

Template.orgPage.helpers({
  'phone': function() {
    var cursor = organisationsPhoneNumbers.find({ orgId: currentOrgId });
    return { count: cursor.count(), items: cursor };
  }
})

html：

 {{#if phone.count}}
   <h4>Phone</h4>
   {{#each phone.items}}
     <li>{{number}} ({{type}})</li>
   {{/each}}
 {{/if}}

Answer 3

对于这种场景有一个相当标准的模式，可以避免多次重新运行同一个助手：

<template name="orgPage">
    <h2>Organisation Name: {{name}}</h2>
    <h3>Contact Details</h3>
    {{#with phone}}
      {{#if count}}
        <h4>Phone</h4>
        <ul>
          {{#each .}}
            <li>{{number}} ({{type}})</li>
          {{/each}}
        </ul>
      {{else}}
        <p>No contact numbers</p>
      {{/if}}  
    {{/with}}
</template>

with 块将其内容的范围设置为phone 助手的结果，它是一个游标。

然后它检查if count() 助手/方法是否为真。如果是这样，它使用 each 迭代器来渲染项目列表，else - 显示没有数字的消息。

请注意，如果您不需要 each 块之外的任何内容，则可以使用 each...else 子句。