knockout.js データの読込み、表示

2012/04/13

ソース

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF−8">
  5. <title>knockoutjsちゅーとりある:SPAでデータの取得</title>
  6. <script type="text/javascript" src="jquery−1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
  8.  
  9. <style>
  10. body { font−family: Helvetica, Arial }
  11. input:not([type]), input[type=text], input[type=password], select { background−color: #FFFFCC; border: 1px solid gray; padding: 2px; }
  12. body { font−family: Helvetica, Arial}
  13. .folders { background−color: #bbb; list−style−type: none; padding: 0; margin: 0; border−radius: 7px;
  14.   background−image: −webkit−gradient(linear, left top, left bottom, color−stop(0, #d6d6d6), color−stop(0.4, #c0c0c0), color−stop(1,#a4a4a4));
  15.   margin: 10px 0 16px 0;
  16.   font−size: 0px;
  17. }
  18. .folders li:hover { background−color: #ddd; }
  19. .folders li:first−child { border−left: none; border−radius: 7px 0 0 7px; }
  20. .folders li { font−size: 16px; font−weight: bold; display: inline−block; padding: 0.5em 1.5em; cursor: pointer; color: #444; text−shadow: #f7f7f7 0 1px 1px; border−left: 1px solid #ddd; border−right: 1px solid #888; }
  21. .folders li { *display: inline !important; } /* IE7 only */
  22. .folders .selected { background−color: #444 !important; color: white; text−shadow:none; border−right−color: #aaa; border−left: none; box−shadow:inset 1px 2px 6px #070707; }
  23.  
  24. .mails { width: 100%; table−layout:fixed; border−spacing: 0; }
  25. .mails thead { background−color: #bbb; font−weight: bold; color: #444; text−shadow: #f7f7f7 0 1px 1px; }
  26. .mails tbody tr:hover { cursor: pointer; background−color: #68c !important; color: White; }
  27. .mails th, .mails td { text−align:left; padding: 0.4em 0.3em; white−space: nowrap; overflow: hidden; text−overflow: ellipsis; }
  28. .mails th { border−left: 1px solid #ddd; border−right: 1px solid #888; padding: 0.4em 0 0.3em 0.7em; }
  29. .mails th:nth−child(1), .mails td:nth−child(1) { width: 20%; }
  30. .mails th:nth−child(2), .mails td:nth−child(2) { width: 15%; }
  31. .mails th:nth−child(3), .mails td:nth−child(3) { width: 45%; }
  32. .mails th:nth−child(4), .mails td:nth−child(4) { width: 15%; }
  33. .mails th:last−child { border−right: none }
  34. .mails tr:nth−child(even) { background−color: #EEE; }
  35.  
  36. .viewMail .mailInfo { background−color: #dae0e8; padding: 1em 1em 0.5em 1.25em; border−radius: 1em; }
  37. .viewMail .mailInfo h1 { margin−top: 0.2em; font−size: 130%; }
  38. .viewMail .mailInfo label { color: #777; font−weight: bold; min−width: 2.75em; text−align:right; display: inline−block; }
  39. .viewMail .message { padding: 0 1.25em; }
  40. </style>
  41.  
  42. <script type="text/javascript">
  43.   $(document).ready(function () {
  44.     function WebmailViewModel() {
  45.       var self = this;
  46.  
  47.       // データ
  48.       self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
  49.       
  50.       // データに対してIDをつけるけど、とりあえず何もなしと思われる。
  51.       self.chosenFolderId = ko.observable();
  52.       self.chosenFolderData = ko.observable();
  53.  
  54.       // クリックしたときの処理。
  55.       self.goToFolder = function(folder) {
  56.         self.chosenFolderId(folder);
  57.  
  58.         // 「/mail?folder=xxx」の戻り値をself.chosenFolderDataへ。
  59.         //$.get('/mail', {folder: folder}, self.chosenFolderData);
  60.  
  61.         // 「/mail」を用意するのが面倒なのでフォルダに合わせて読み込むファイルを変更
  62.         var fileName = "./" + folder + ".txt";
  63.         $.getJSON(fileName, {}, self.chosenFolderData);
  64.       };
  65.       
  66.       // 最初に表示するフォルダ
  67.       self.goToFolder('Inbox');
  68.     }
  69.  
  70.     ko.applyBindings(new WebmailViewModel());
  71.   });
  72. </script>
  73.  
  74. </head>
  75. <body>
  76.  
  77. <!−− Folders −−>
  78. <ul class="folders" data−bind="foreach: folders">
  79. <li data−bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.goToFolder"></li>
  80. </ul>
  81.  
  82. <!−− Mails grid −−>
  83. <table class="mails" data−bind="with: chosenFolderData">
  84.   <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
  85.   <tbody data−bind="foreach: mails">
  86.     <tr>
  87.       <td data−bind="text: from"></td>
  88.       <td data−bind="text: to"></td>
  89.       <td data−bind="text: subject"></td>
  90.       <td data−bind="text: date"></td>
  91.     </tr>
  92.   </tbody>
  93. </table>
  94.  
  95. </body>
  96. </html>

めも

取得したデータの表示

85行目の「foreach」で出力。値は「mails」の各値(「from」や「to」など)。
83行目に「with: chosenFolderData」があるので「chosenFolderData」の値(InboxやArchive)の「mails」になる。
※83行目の「with」が無ければ、85行目の「mails」は「chosenFolderDataのmails」ってな感じで指定する必要あり。

データの取得

58~63行目が取得部。本来は59行目「$.get('/mail', {folder: folder}, self.chosenFolderData);」でok。
ただ、確認する際に読み込むファイルを用意するのが面倒なので「$.getJSON(fileName, {}, self.chosenFolderData);」に修正。
※ここでの「fileName」には「Inbox.txt」「Sent.txt」等。

「Inbox.txt」「Sent.txt」等の中身

JSON形式(?)として記載(※JSONなので、63行目で「$.getJSON()」としている。)

  1. {
  2.   "id":"Spam","mails":
  3.   [
  4.     {"id":44,"from":"○○○","to":"xxx@example.com","date":"May 4, 2011","subject":"@@ ○○○ @@","folder":"Spam"},
  5.     {"id":45,"from~}
  6.     …
  7.   ]
  8. }

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい