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.

client_handlebars.html 2.0KB

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