In a Meteor project, when using Blaze (Spacebars) to set up iteration through a data container in an HTML template, the normal pattern is to use an ‘each’ block. For example:<\/p>\n
{{ #each dataContainer }}\r\n ... HTML tags here ...\r\n ... HTML tags here ...\r\n{{ \/each }}<\/pre>\nAn each block starts with #each<\/code> and ends with\u00a0\/each<\/code>. What it does is iterate through every row or element in the dataContainer to produce the block of HTML code for every row. For example, if you have a list of quotes in the data container and you want to output each with some HTML\/CSS formatting:<\/p>\n{{ #each listOfQuotes }}\r\n <h1 class\"bold\"><i>{{ quote }}<\/i><\/h1>\r\n{{ \/each }}<\/pre>\nLet’s say your data container is populated with either a Mongo DB collection or MySQL query. It is possible that the container could come back empty for a particular user. In this case, we can use an {{ else }} in our each block to provide some alternate output for the case of no query results being returned. For example:<\/p>\n
{{ #each listOfQuotes }}\r\n <h1 class\"bold\"><i>{{ quote }}<\/i><\/h1>\r\n {{ else }}\r\n No quotes found. \r\n{{ \/each }}<\/pre>\nThis is a convenient shortcut to handling the empty container, so that we don’t have to deal with it in our Meteor.template.helper function.<\/p>\n
For more information about Blaze and its use of Spacebars, see:
\nhttp:\/\/blazejs.org\/guide\/introduction.html<\/a>
\nhttp:\/\/blazejs.org\/guide\/spacebars.html<\/a>
\nhttp:\/\/blazejs.org\/api\/spacebars.html<\/a><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
In a Meteor project, when using Blaze (Spacebars) to set up iteration through a data container in an HTML template, the normal pattern is to use an ‘each’ block. For example: {{ #each dataContainer }} … HTML tags here … … HTML tags here … {{ \/each }} An each block starts with #each and … Continue reading Spacebars: How to handle an empty data container when iterating with #each<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,117],"tags":[119,45,116,120],"class_list":["post-1773","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-meteor","tag-blaze","tag-javascript","tag-meteor","tag-spacebars"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1773"}],"version-history":[{"count":11,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1773\/revisions"}],"predecessor-version":[{"id":1817,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1773\/revisions\/1817"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}