Метеорные шаблоны. Как я могу не отображать HTML-элемент на основе {{#if}}?

Question

У меня есть коллекция, в которой хранятся номера телефонов для компаний. Если у компании есть номер телефона, нарисуйте эти номера телефонов. Если у компании нет номера телефона, не рисуйте.

В настоящее время эта половина работает. Он не будет набирать номера телефонов, если в коллекции нет цифр, но он по-прежнему рисует заголовок < h4> Телефон </h4>, и я не хочу этого.

Вот код:

<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 }) 
    } 

}); 

Как я могу получить его, чтобы НЕ рисовать < h4> Телефон </h4>, если данные не возвращаются из коллекции?

Answer 1

короткий ответ

Храните все исходного кода и заменить {{#if phone}} с {{#if phone.count}}

длинный ответ

Spacebars имеет действительно крутое path evaluation особенность, которая лучше всего объяснить на примере ,

Представьте, что у вас есть документ post в вашем текущем контексте. Каждый post имеет modeled, чтобы иметь вспомогательный помощник fetchAuthor, который возвращает пользовательский документ. Предположим, вам нужна более низкая версия фамилии автора.В JavaScript вы могли бы написать что-то вроде:

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

Теперь, если нам нужно это значение в шаблоне мы можем написать:

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

Как spacebars оценивает каждый идентификатор в пути, он проверяет, является ли это функция - если она есть, она вызывает ее. Обратите внимание, что это работает, только если вызываемые функции не принимают никаких аргументов.

Возвращаясь к нашему первоначальному примеру, помощник phone возвращает курсор, который имеет функцию count. Мы можем написать {{#if phone.count}}, а пробелы поймут, что мы имеем в виду phone.count(), потому что count является функцией.

Answer 2

я столкнулся с этой проблемой рано, вот простой подход, при котором вы возвращаете объект из помощника, который включает в себя подсчет:

ЯШ:

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

Существует довольно стандартный шаблон для такого рода сценариев, что av OIDs повторно запущен тот же помощник несколько раз:

<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 помощника, который представляет собой курсор.

Затем он проверяет ifcount() хелпер/метод - это истина-y. Если это так, то используется итератор each, отображающий список элементов, else - отображается сообщение с указанием номеров.

Обратите внимание, что существует пункт each...else, который работает, если вам ничего не нужно за пределами блока each.