knockout.js データのリスト表示
2012/04/11
ソース
リスト表示だけどCSSで横並びに表示。最終的にWEBメールを作ることを前提としたつくり。
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF−8">
- <title>knockoutjsちゅーとりある：SPAで枠のみ表示（WEBメール）</title>
- <script type="text/javascript" src="jquery−1.5.1.min.js"></script>
- <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
- <style>
- body { font−family: Helvetica, Arial }
- input:not([type]), input[type=text], input[type=password], select { background−color: #FFFFCC; border: 1px solid gray; padding: 2px; }
- body { font−family: Helvetica, Arial}
- .folders { background−color: #bbb; list−style−type: none; padding: 0; margin: 0; border−radius: 7px;
- background−image: −webkit−gradient(linear, left top, left bottom, color−stop(0, #d6d6d6), color−stop(0.4, #c0c0c0), color−stop(1,#a4a4a4));
- margin: 10px 0 16px 0;
- font−size: 0px;
- }
- .folders li:hover { background−color: #ddd; }
- .folders li:first−child { border−left: none; border−radius: 7px 0 0 7px; }
- .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; }
- .folders li { *display: inline !important; } /* IE7 only */
- .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; }
- .mails { width: 100%; table−layout:fixed; border−spacing: 0; }
- .mails thead { background−color: #bbb; font−weight: bold; color: #444; text−shadow: #f7f7f7 0 1px 1px; }
- .mails tbody tr:hover { cursor: pointer; background−color: #68c !important; color: White; }
- .mails th, .mails td { text−align:left; padding: 0.4em 0.3em; white−space: nowrap; overflow: hidden; text−overflow: ellipsis; }
- .mails th { border−left: 1px solid #ddd; border−right: 1px solid #888; padding: 0.4em 0 0.3em 0.7em; }
- .mails th:nth−child(1), .mails td:nth−child(1) { width: 20%; }
- .mails th:nth−child(2), .mails td:nth−child(2) { width: 15%; }
- .mails th:nth−child(3), .mails td:nth−child(3) { width: 45%; }
- .mails th:nth−child(4), .mails td:nth−child(4) { width: 15%; }
- .mails th:last−child { border−right: none }
- .mails tr:nth−child(even) { background−color: #EEE; }
- .viewMail .mailInfo { background−color: #dae0e8; padding: 1em 1em 0.5em 1.25em; border−radius: 1em; }
- .viewMail .mailInfo h1 { margin−top: 0.2em; font−size: 130%; }
- .viewMail .mailInfo label { color: #777; font−weight: bold; min−width: 2.75em; text−align:right; display: inline−block; }
- .viewMail .message { padding: 0 1.25em; }
- </style>
- <script type="text/javascript">
- $(function () {
- function WebmailViewModel() {
- var self = this;
- // データ
- self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
- // データに対してIDをつけるけど、とりあえず何もなしと思われる。
- self.chosenFolderId = ko.observable();
- // クリックしたときの処理。引数の「folder」はどっから出てきたのかは不明。「self.folders」の各値に相当すると予測。
- self.goToFolder = function(folder) {
- self.chosenFolderId(folder);
- };
- };
- ko.applyBindings(new WebmailViewModel());
- })();
- </script>
- </head>
- <body>
- <!−− Folders −−>
- <ul class="folders" data−bind="foreach: folders">
- <li data−bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.goToFolder"></li>
- </ul>
- </body>
- </html>
※後で追加するのが面倒なのであらかじめCSSを全部記載しておく。
めも
データの表示
67行目で「folders」を「foreach」している。「folders」は48行目の「self.folders」。
68行目で表示するんだけどこのときに特殊な変数の「$data」を使う。
この場合だと「$data」には48行目の「self.folders」の各値が相当。
表示だけだったら68行目は「<li data−bind="text: $data"></li>」だけでok。
「クリックしたときにCSSを変更する」の「クリックしたとき」
68行目の「click: $root.goToFolder」にあたる。
内容としては54・55行目で「self.chosenFolderId」に引数「folder」を渡している。
※この引数「folder」はどうやって渡しているのかが分からない…。違う名称にしても無問題。textバインディングの値が渡されていると考えるのが妥当か？
「クリックしたときにCSSを変更する」の「CSSを変更」
68行目の「css: { selected: $data == $root.chosenFolderId() }」にあたる。
まずcssバインディングで「class="selected"」ってなるような指定をする。
条件として「textバインディングでの値とclickバインディングの値が同じときだけ」。
cssバインディングにある「selected」について
「selected」ってのはJavascriptの変数名であるからこのまま。
もし好きな名前にするなら「'」で、くくってあげる。
「css: { 'MyClassName': $data == $root.chosenFolderId() }」みたいな感じで。