流星模板。我怎样才能不渲染基于 {{#if}} 的 HTML 元素？

Question

我有一个 collection 存储公司的 phone 号码。如果一家公司有 phone 个数字，请绘制这些 phone 个数字。如果一家公司没有phone号码，请不要抽取。

目前已经成功了一半。如果 collection 中没有数字，它不会绘制 phone 数字，但它仍然绘制 < h4 >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 })
    }

});

如果 collection 没有返回数据，我如何让它不绘制

Phone

？

Answer 1

我很早就遇到过这个问题，这里有一个简单的方法，您可以 return 来自帮助程序的包含计数的对象：

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 2

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

<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() helper/method 是否为真。如果是这样，它使用 each 迭代器来呈现项目列表，else - 显示没有数字的消息。

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

Answer 3

简答

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

长答案

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

假设您在当前上下文中有一个 post 文档。每个 post 是 modeled 有一个 fetchAuthor 助手，其中 returns 一个用户文件。假设您需要作者姓氏的小写版本。在 JavaScript 你可以这样写：

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

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

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

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

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

流星模板。我怎样才能不渲染基于 {{#if}} 的 HTML 元素？

Meteor templates. How can I not render a HTML element based on an {{#if}}?

if-statement

mongodb

meteor

spacebars

Phone