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.

knockout.html 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <html>
  2. <head>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
  5. <script id="posts-template" type="text/html">
  6. <ul>
  7. <!-- ko foreach: posts -->
  8. <li>
  9. <span data-bind="text: id"></span>, <span data-bind="text: content"></span>
  10. <a href="javascript:void(0)" data-bind="click: $parent.edit">edit</a>
  11. <a href="javascript:void(0)" data-bind="click: $parent.delete">del</a>
  12. </li>
  13. <!-- /ko -->
  14. <li>
  15. <form data-bind="submit: submit">
  16. <input name="content" data-bind="value: form"/>
  17. </form>
  18. </li>
  19. </ul>
  20. </script>
  21. <script>
  22. var url = '/api.php/records/posts';
  23. function Post(id,content){
  24. var self = this;
  25. self.id = ko.observable(id);
  26. self.content = ko.observable(content);
  27. }
  28. function PostList(){
  29. var self = this;
  30. self.posts = ko.observableArray([]);
  31. self.form = ko.observable('');
  32. self.bound = false;
  33. self.edit = function(post) {
  34. var content = prompt('Value',post.content());
  35. if (content!==null) {
  36. $.ajax({url:url+'/'+post.id(), type: 'PUT', data: {content:content}, success:self.update});
  37. }
  38. };
  39. self.delete = function(post) {
  40. if (confirm("Deleting #"+post.id()+". Continue?")) {
  41. $.ajax({url:url+'/'+post.id(), type: 'DELETE', success:self.update});
  42. }
  43. };
  44. self.submit = function(form) {
  45. $.post(url, {user_id:1,category_id:1,content:self.form()}, self.update);
  46. };
  47. self.render = function(data) {
  48. var array = data.records;
  49. self.posts.removeAll();
  50. for (i=0;i<array.length;i++) {
  51. self.posts.push(new Post(array[i].id,array[i].content));
  52. }
  53. self.form('');
  54. if (!self.bound){ ko.applyBindings(self); self.bound = true; }
  55. };
  56. self.update = function() {
  57. $.get(url, self.render);
  58. };
  59. self.post = function() {
  60. $.post(url, {user_id:1,category_id:1,content:"from knockout"}, self.update);
  61. }
  62. self.post();
  63. };
  64. $(function(){ new PostList(); });
  65. </script>
  66. </head>
  67. <body>
  68. <div data-bind="template: { name: 'posts-template'}">Loading...</div>
  69. </body>
  70. </html>