api de gestion de ticket, basé sur php-crud-api. Le but est de décorrélé les outils de gestion des données, afin
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

mustache.html 1.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <html>
  2. <head>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
  5. <script id="PostListTemplate" type="text/mustache">
  6. <ul>
  7. {{#records}}
  8. <li>
  9. <span class="id">{{id}}</span>, <span class="content">{{content}}</span>
  10. <a href="javascript:void(0)" class="edit">edit</a>
  11. <a href="javascript:void(0)" class="delete">del</a>
  12. </li>
  13. {{/records}}
  14. <li>
  15. <form>
  16. <input name="content"/>
  17. </form>
  18. </li>
  19. </ul>
  20. </script>
  21. <script>
  22. function PostList(element, template) {
  23. var self = this;
  24. var url = '/api.php/records/posts';
  25. self.edit = function() {
  26. var li = $(this).parent('li');
  27. var id = li.find('span.id').text();
  28. var content = li.find('span.content').text();
  29. content = prompt('Value',content);
  30. if (content!==null) {
  31. $.ajax({url:url+'/'+id, type: 'PUT', data: {content:content}, success:self.update});
  32. }
  33. };
  34. self.delete = function() {
  35. var li = $(this).parent('li');
  36. var id = li.find('span.id').text();
  37. if (confirm("Deleting #"+id+". Continue?")) {
  38. $.ajax({url:url+'/'+id, type: 'DELETE', success:self.update});
  39. }
  40. };
  41. self.submit = function(e) {
  42. e.preventDefault();
  43. var content = $(this).find('input[name="content"]').val();
  44. $.post(url, {user_id:1,category_id:1,content:content}, self.update);
  45. };
  46. self.render = function(data) {
  47. element.html(Mustache.to_html(template.html(),data));
  48. };
  49. self.update = function() {
  50. $.get(url, self.render);
  51. };
  52. self.post = function() {
  53. $.post(url, {user_id:1,category_id:1,content:"from mustache"}, self.update);
  54. };
  55. element.on('submit','form',self.submit);
  56. element.on('click','a.edit',self.edit)
  57. element.on('click','a.delete',self.delete)
  58. self.post();
  59. };
  60. $(function(){ new PostList($('#PostListDiv'),$('#PostListTemplate')); });
  61. </script>
  62. </head>
  63. <body>
  64. <div id="PostListDiv">Loading...</div>
  65. </body>
  66. </html>