Making a live microblogging timeline part 4 Showing the live updating timeline - CityWebConsultants/Iris GitHub Wiki

Objective

In this tutorial we're going to use the angular live load module to load a live list of microblog entities onto the page. Ready for anyone to read them.

Add an entity fetch template to your template

The Iris entity fetch embed system can be used to quickly load in some entities (with specific filters and sorts if needed) while checking things like the permission system to see if they can be viewed.

Put [[[entity timeline,{"entities":["microblog"],"sort":{"eid":"desc"}]]] somewhere in your template.

This will load any microblog entities into the timeline template variable. We also add a sort to reverse from the normal ascending entity ID order to make the newest posts appear first.

You now need to loop over the posts in your template using Handlebars. To make them live update, simply wrap the Handlebars code in an {{{{iris_liveupdate}}}} block.

Note: Your theme needs to have a [[[tags headTags]]] embed in it to load necessary client side JavaScript.

[[[form microblog]]]

[[[entity microblog,timeline,null,null,eid|desc]]]

{{{{iris_liveupdate}}}}

  <ul>

    {{#each timeline}}

       <li>{{this.content}}</li>

    {{/each}}
  </ul>

{{{{/iris_liveupdate}}}}

Done! You've got a live updating timeline (any post you make will automatically update on other people's browsers without them needing to refresh the page). It'll also show the posts normally as a fallback without live load if JavaScript is not enabled.

⚠️ **GitHub.com Fallback** ⚠️