Template-{{if}}

by HYEONGJINKIM

HTML

<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="blogPostContainer"></div>
<script id="blogPostTemplate" type="text/x-jQuery-tmpl">
  <h1>${postTitle}</h1>
  <p>${postEntry}</p>
  {{if categories}} 
  	Categories: {{each categories}} <i>${$value}</i> {{/each}} 
	{{else}} 
  	Uncategorized
  {{/if}}
</script>

JavaScript

var blogPosts = [
  {
    postTitle: "How to fix a sink plunger in 5 minutes",
    postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.",
    categories: ["HowTo", "Sinks", "Plumbing"]
  },
  {
    postTitle: "How to remove a broken lightbulb",
    postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.",
    categories: ["HowTo", "Lightbulbs", "Electricity"]
  },
  {
    postTitle: "New associate website",
    postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
  }
];

// Render the blog posts
$("#blogPostTemplate").tmpl(blogPosts).appendTo("#blogPostContainer");