Menu icon Foundation
Accessing data files via partials

 

I've created a partial that's a template for all of my announcements - alerts, success, warning, etc. I'd like to use panini to load the right data based on the type of announcement. 

Here's my json file with the data for each type of announcement (data/announcements.json):  

{
  "alert": [
      {
        "class": "alert",
        "headline": "Woah! Slow down partner."
      }
  ],
  "success": [
      {
        "class": "success",
        "headline": "Well done! Your action was a success."
      }
  ],
  "warning": [
      {
        "class": "warning",
        "headline": "Be careful! You almost messed everything up."
      }
  ],
  "default": [
      {
        "class": "default",
        "headline": "Just a normal announcement."
      }
  ]
}

 

Here's how I'm calling the partial in my index.html:

{{> announcement class="alert" type=announcements.alert}}

and here's my partial: 

<div class="callout {{class}} announcement" data-closable>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <div class="cell small-12">
        <p class="{{class}}__text">{{type.headline}}</p>
        <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>

 

The class variable works fine, but the {{type.headline}} is not pulling in any data. What am I missing? Do I need to call the announcements.json file a different way? 

Thanks for all help!

paniniJSONHandlebarshelpsdata

 

I've created a partial that's a template for all of my announcements - alerts, success, warning, etc. I'd like to use panini to load the right data based on the type of announcement. 

Here's my json file with the data for each type of announcement (data/announcements.json):  

{
  "alert": [
      {
        "class": "alert",
        "headline": "Woah! Slow down partner."
      }
  ],
  "success": [
      {
        "class": "success",
        "headline": "Well done! Your action was a success."
      }
  ],
  "warning": [
      {
        "class": "warning",
        "headline": "Be careful! You almost messed everything up."
      }
  ],
  "default": [
      {
        "class": "default",
        "headline": "Just a normal announcement."
      }
  ]
}

 

Here's how I'm calling the partial in my index.html:

{{> announcement class="alert" type=announcements.alert}}

and here's my partial: 

<div class="callout {{class}} announcement" data-closable>
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <div class="cell small-12">
        <p class="{{class}}__text">{{type.headline}}</p>
        <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>

 

The class variable works fine, but the {{type.headline}} is not pulling in any data. What am I missing? Do I need to call the announcements.json file a different way? 

Thanks for all help!