jsRender for complex display rule

Hello Everyone,

So it comes to a point where I have a set of data in front of me and I want to render those data in a quick and easy way. I don't like rendering html through code behind because it is just cumbersome and hard to maintain. Also, it is not that simple to display these data because there needs to be some logic when rendering each record.

This is where I thought that jsRender would be the perfect thing to use! I have used jQuery template before and  I found it quite useful but they did not continue that project. jsRender is still active in development and it is proved to be much powerful and faster (as it's claimed to be) and fortunately it is very easy to use as well.

To cut things short, the sample data looks like this:
Entity: CourseOutline

  • PathwayId (each CourseOutline can have more than 1 pathway)
  • PathwayLineNo (1-5)
  • EntryPoint (e.g. Year 12)
  • Duration (duration of the Course)
  • Product (this is the Course Product entity with Product Name and Product Number attributes - only 1 product per PathwayLineNo)
  • IsFurtherStudy (shown in different color)
The end product looks like this:

In the code behind it is pretty simple. You just need to group the CourseOutlines by PathwayId, then serialize it to JSON format and assign it to the public property of the page or in my case - usercontrol:

Now on the design page, just get that content and then parse it to become JavaScript Object. Then use jsRender template to render the display and display it in the div container. Code looks like this:
jsRender Template


Look how easy it is! The beauty is that you don't have to compile your code every time you make UI changes (if you render it in code).

You just need to modify your design page and it will be reflected straight away. It is very fast in terms of performance and you can style your output easily as well.

 For more information on jsRender visit http://borismoore.github.com/jsrender/demos/index.html. I hope it keeps getting better and better to accommodate more complex scenarios :) Hope this helps, Andreas

Music Website New Look! (HTML5 & jQuery)

Hello All,

I am excited to say that my music website http://pianoismyfriend.com has been refurbished and gone live! :)

I built the website by myself and it was a really good personal project and it allows me to explore all different kind of tools and technology out there. It surprised me how we can leverage variety of existing services people have to offer without reinventing the wheels these days.

Some technical information about the new PianoIsMyFriend website:
  • LightCMS is used as the hosting and the content management provider. I moved away from WordPress because of the maintenance effort comparison and the different goal that I wanted to achieve. My website should be really simple with minimal plugins. I found it hard keeping up-to-date with WordPress versions and updating my plugins that break after updating my WordPress. 

    With LightCMS I was able to get my website up within a week and focus more into my content and   how it fits together. It provides SEO support as well and the CMS is really easy to use for simple website. The only downside is the pricing - I pay $20/ month at the moment compared to the $5 for WordPress previously.
  • HTML5 with jQuery - that's all I used for my website. With the new HTML5 tags including the audio tag, a few jQuery plugins to provide animation and other functionality, it did not take very long to create compelling and attractive look for my website. I used FancyBox with the idea that my visitor should be able to keep listening to my song on the homepage when traversing to different pages. Those pages are automatically opened inside the FancyBox iframe when opened through the homepage. However when going to specific URL like http://pianoismyfriend.com/albums, you can see that it is not an orphaned page because it still has the header, navigation and footer for SEO purposes.

  • E-Junkie is used for their easy 'digital' e-commerce service. It provides digital download with robust management interface. They give the anchor tags for each product you sell to integrate to your website. (as shown above). LightCMS has not provide support for digital download but I was glad to find other alternative that is easy to use and configure.
  • AddThis is used for integrating social media buttons such as Facebook Like and Tweet button. Again, very easy to use and you can integrate with Google Analytics if you want. I just needed to paste the code from their website and modify the Facebook Open Graph meta tags to set the correct thumbnail and information when someone clicking the Like button.

I hope my experience can help you some time down the track if you intend to build simple websites for yourself or your clients. Keep in mind that LightCMS does not allow you to put custom code in so you cannot do extensive programming in that regards. Workarounds are to host that somewhere else and show it via iframe or put it in sub-domain of your website.

Take care and Enjoy!