「knockoutjsちゅーとりある：SPA（webMail）クリックしたデータをレイアウトを変えて表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

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>
<ul class="folders" data-bind="foreach: folders">
<li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.goToFolder"></li>
</ul>
<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>
<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>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>