In canjs, what is the most idiomatic way of conditionally displaying sections of a mustache template based on the existence of any model instances?

Question

I am iterating through each model instance in a mustache style template and want a clean way to show a message if there are no available instances (ex. if someone deletes/destroys them all)

    {{#notifications}}
      <div class='tertiary'>
        <li>Sent {{& displayFrequency frequency}} <br> to <br> <span class='strong'>{{recipients}}</span></li>
        <div id='action-buttons' {{data "notification"}}>    
          <span class='notification-option'><button class='edit'>edit details</button></span>
          <span  class='notification-option'><button class='delete'>delete</button></span>
          <span class='notification-option'>
            <input class="is-active" type="checkbox" {{#if active}}checked{{/if}}>
          </span>
        </div>      
      </div>      
      <br><br>    
    {{/notifications}}

This first way that came to mind:

  {{#if notifications.length}}
    {{#notifications}}
      <div class='tertiary'>
        <li>Sent {{& displayFrequency frequency}} <br> to <br> <span class='strong'>{{recipients}}</span></li>
        <div id='action-buttons' {{data "notification"}}>    
          <span class='notification-option'><button class='edit'>edit details</button></span>
          <span  class='notification-option'><button class='delete'>delete</button></span>
          <span class='notification-option'>
            <input class="is-active" type="checkbox" {{#if active}}checked{{/if}}>
          </span>
        </div>      
      </div>      
      <br><br>    
    {{/notifications}}
  {{else}}
    <div>No Notifications</div>        
  {{/if}}

Are there better ways of doing this? Are there more idiomatic ways of doing this in the context of canjs?

That looks good to me. You can always use a [partial](http://canjs.com/docs/can.mustache.helpers.partial.html) for the actual content but I wouldn't think that is necessary here. — Daff, Feb 14 '15 at 16:25

score 1 · Answer 1 · answered Feb 16 '15 at 16:21

1

You can also use the tag #unless to avoid nesting:

{{#each notifications}}
{{/each}}
{{#unless notifications.length}}
{{/unless}}

answered Feb 16 '15 at 16:21

Per Ehnbom

11
2

In canjs, what is the most idiomatic way of conditionally displaying sections of a mustache template based on the existence of any model instances?

1 Answers1