Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to template data into the Ajax version of Smart Admin theme?

I am building an application for a client where I am developing a web service using Laravel5 on the beck end and I will consume it with the Smart Admin Theme, particularly the Ajax version.

I have already worked with the HTML version of this theme and I was still using Laravel as the back end. I could simply use the Blade templating engine provided by Laravel and inject the data into the views.

But now since I will be using the Ajax version, how am I supposed to template the data into the views. I can request the web service for the data and it will return it in JSON format. That part is clear to me as I have done it before.

Most of the widgets have inbuilt integration such as the jquery data tables and the full calendar library used in the theme. I can see the data will be injected here but what about the forum and other things. Am I supposed to manipulate the DOM by using Jquery or is there a better way around.

Angular provides a way in which I can two way data bind the incoming data and I can use ng-repeat to inject it into tables and unordered lists but how will I accomplish this here. Is there a templating system I can use for this?

like image 723
Rohan Avatar asked Apr 24 '15 08:04

Rohan


1 Answers

Thank you for your answers but unfortunately I could not make sense out of these. Nonetheless I appreciate your input.

Finally I resort to use rivet.js library. This library provides lightweight and powerful data binding + templating solution for building modern web applications.

They have a good documentation to help with development.

Now I can simply template data into the views like { data.someAttribute } like in the following snippet of code:

<section id="auction">
  <h3>{ auction.product.name }</h3>
  <p>Current bid: { auction.currentBid | money }</p>

  <aside rv-if="auction.timeLeft | lt 120">
    Hurry up! There is { auction.timeLeft | time } left.
  </aside>
</section>

And then I can simply bind the section#auction tag with the auction JSON object like so:

rivets.bind($('#auction'), {auction: auction})

This has made it really easy to fetch my data from the server and template the data into the views. Now the same back end web service can eventually be consumed by mobile applications.

I hope this helps someone. :)

like image 96
Rohan Avatar answered Nov 14 '22 14:11

Rohan