knockout.js クリックしたデータをレイアウトを変えて表示

2012/04/13

ソース

サンプル：knockoutjsちゅーとりある：SPA（webMail）クリックしたデータをレイアウトを変えて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF−8">
<title>knockoutjsちゅーとりある：SPA（webMail）クリックしたデータをレイアウトを変えて表示</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">
$(document).ready(function () {
function WebmailViewModel() {
var self = this;
// フォルダのデータ
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
// データに対してIDをつけるけど、とりあえず何もなしと思われる。
self.chosenFolderId = ko.observable();
self.chosenFolderData = ko.observable();
self.chosenMailData = ko.observable();
// フォルダ（InoboxやArchiveなど）をクリックしたときの処理
self.goToFolder = function(folder) {
// クリックされたデータを取得：folder（InoboxやArchive）
self.chosenFolderId(folder);
// メール詳細であるchosenMailDataを非表示にする
self.chosenMailData(null);
// 「/mail?folder=xxx」（GET送信）の結果をself.chosenFolderDataにいれる
//$.get('/mail', {folder: folder}, self.chosenFolderData);
// フォルダに合わせて読み込むファイルを変更
var fileName = "./" + folder + ".txt";
$.getJSON(fileName, {}, self.chosenFolderData);
};
// 詳細データの取得
self.goToMail = function(mail) {
self.chosenFolderId(mail.folder);
// メール一覧であるchosenFolderDataを非表示にする
self.chosenFolderData(null);
// 「/mail?mailId=xxx」（GET送信）の結果をself.chosenMailDataにいれる
//$.get("/mail", { mailId: mail.id }, self.chosenMailData);
// フォルダに合わせて読み込むファイルを変更
var fileName = "./mail/mailId" + mail.id + ".txt";
$.getJSON(fileName, {}, self.chosenMailData);
};
// 最初に表示するフォルダ
self.goToFolder('Inbox');
}
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>
<!−− メール一覧 chosenFolderData −−>
<table class="mails" data−bind="with: chosenFolderData">
<thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
<tbody data−bind="foreach: mails">
<tr data−bind="click: $root.goToMail">
<td data−bind="text: from"></td>
<td data−bind="text: to"></td>
<td data−bind="text: subject"></td>
<td data−bind="text: date"></td>
</tr>
</tbody>
</table>
<!−− メール詳細 chosenMailData −−>
<div class="viewMail" data−bind="with: chosenMailData">
<div class="mailInfo">
<h1 data−bind="text: subject"></h1>
<p><label>From</label>: <span data−bind="text: from"></span></p>
<p><label>To</label>: <span data−bind="text: to"></span></p>
<p><label>Date</label>: <span data−bind="text: date"></span></p>
</div>
<p class="message" data−bind="html: messageContent" />
</div>
</body>
</html>

めも

詳細データの表示

112～121行目で詳細データを作成。
103行目のtrタグで「click: $root.goToMail」を指定。これで、trタグがクリックしたら69行目のself.goToMailが実行される。
実行されたら112～121行目が表示される。

一覧や詳細データの非表示

「一覧が表示されているときは、詳細データを非表示。詳細データが表示されてるときは一覧を非表示」ってな感じにする。

まず「一覧が表示されているときは、詳細データを非表示」ってのは53行目の「goToFolder」が実行されたとき。58行目の「self.chosenMailData(null);」で非表示。

次に「詳細データが表示されてるときは一覧を非表示」ってのは69行目の「goToMail」が実行されたとき。73行目の「self.chosenFolderData(null);」で非表示。

使うデータ

61・76行目で「/mail」にパラメーターをつけてGET送信。

自身のテストでやるにはこれは少し面倒なので各パラメーターをつけてGET送信した値を1ファイルずつに変更。
各ファイルはテキストファイルなのでJSONとして読む込むために65・80行目で$.getJSONをしている。

chosenFolderDataのJSONサンプル

{"id":"Inbox","mails":[{"id":1,"from":"Abbot \u003coliver@smoke−stage.xyz\u003e","to":"recatnap@example.com","date":"May 25, 2011","subject":"Booking confirmation #389629244","folder":"Inbox"},{"id":2,"from":"Addison Begoat \u003cupton.oprdrusson@pear−income.xyz\u003e","to":"recatnap@example.com","date":"May 7, 2011","subject":"FW: Associate advice","folder":"Inbox"},{"id":3,"from":"Allistair \u003cleroy72@plane−railway.xyz\u003e","to":"recatnap@example.com","date":"May 19, 2011","subject":"RE: Phone call tomorrow 5 o\u0027clock","folder":"Inbox"},{"id":4,"from":"emmanuel26@ghost.xyz","to":"recatnap@example.com","date":"May 22, 2011","subject":"Completing basketball project","folder":"Inbox"},{"id":5,"from":"jamalia.alnismith1@twigdad.xyz","to":"recatnap@example.com","date":"Apr 26, 2011","subject":"FW: Can you get DE to resubmit accounts?","folder":"Inbox"},{"id":6,"from":"lionel.qugy@cribsmoke.xyz","to":"recatnap@example.com","date":"May 22, 2011","subject":"RE: Catch up at 9:00 to finalise rain spec","folder":"Inbox"},{"id":7,"from":"Madison Lalinesson \u003cmelinda.gofagy@wing−language2.xyz\u003e","to":"recatnap@example.com","date":"May 19, 2011","subject":"RE: Pencil scenarios","folder":"Inbox"},{"id":8,"from":"rajah.nukripyford@cast92.xyz","to":"recatnap@example.com","date":"Apr 28, 2011","subject":"Flavor benefit gig","folder":"Inbox"},{"id":9,"from":"Sandra Juanhison \u003cyoshi.mostaline72@facefruit.xyz\u003e","to":"recatnap@example.com","date":"May 8, 2011","subject":"RE: Apparel5 network is back up","folder":"Inbox"},{"id":10,"from":"Sylvester \u003crose.va@bunpig98.xyz\u003e","to":"recatnap@example.com","date":"May 1, 2011","subject":"Feedback requested by Ayanna Nuyo","folder":"Inbox"},{"id":11,"from":"veronica@heart.xyz","to":"recatnap@example.com","date":"May 4, 2011","subject":"Project Book starting 6pm","folder":"Inbox"},{"id":12,"from":"XLN \u003cbasia@framehome.xyz\u003e","to":"recatnap@example.com","date":"May 8, 2011","subject":"RE: Remember Whoopi\u0027s joke","folder":"Inbox"}]}

chosenMailDataのJSONサンプル

{"id":1,"from":"Abbot \u003coliver@smoke−stage.xyz\u003e","to":"recatnap@example.com","date":"May 25, 2011","subject":"Booking confirmation #389629244","messageContent":"Hi!\u003cbr/\u003e\u003cbr/\u003eSchwebet und ernsten zu ich trane diesmal schatten ich folgenden erste seh jenem und irrt was menge dunst herauf. Jenem meinem die mich bang jenem den lebens das busen verklungen fuhlt folgenden. Stunden folgenden um nach widerklang strenge ein welt ich euch alten der um nun erfreuet gedrange. Festzuhalten bilder mich ihr jenem mit verklungen auf euch wird selbst des noch weich an des. Tranen um sehnen gleich das stunden irrt einst ertont besitze ein und liebe wohl noch manche und hinweggeschwunden ertont.\u003cbr/\u003e\u003cbr/\u003eLied lieb zauberhauch erste die steigen fuhlt mich liebe halbverklungnen zu selbst liebe gluck. Mir es fuhlt hinweggeschwunden schwebet nun euch gluck auf irrt neu weiten fuhlt und jenem bringt lebens versuch. Erste folgenden ich walten wird euren sang nicht lebt mit es steigt widerklang tonen nun busen.\u003cbr/\u003e\u003cbr/\u003eGesange zu nun hinweggeschwunden vom mich fuhlt trane blick kommt zu. Um wohl es freundliche denen geneigt wird. Menge horen zauberhauch vom ertont wiederholt mich die nicht jenem euch ein.\u003cbr/\u003e\u003cbr/\u003eWiderklang der lebens der zug trane selbst sich bilder alten strenge zerstoben zauberhauch die um. Ertont versuch erfreuet und. Ein wieder zerstreuet zerstoben folgt ich herzen der kommt ihr mein sich ersten gedrange.\u003cbr/\u003e\u003cbr/\u003eBest regards − Jonas","folder":"Inbox"}