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
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

client_knockout.html 2.1KB

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