Code 2012 のアンケート表示Webアプリを作成しました
今日、明日と Code2012 という素晴らしいイベントが開催されています。
催し物の一つとして、イベント開催前よりアンケートのAPIが公開され、
数人の方がクライアントアプリを作成されています。
ということで、私もアンケートを表示するだけのアプリを作ってみました。
を使いました。
サーバ側でWebClientでhttp://code-survey.herokuapp.com/surveys.jsonからjsonを取得し、
MVC4のApiControllerでデータを公開、
jQueryよりそのjsonを取得し、knockout.jsでバインドさせています。
つっかかったところ
WEB APIがはくJson
{ app_name: "native", created_at: "2012-07-06T05:32:29Z" }
{ app_name: "native", created_at: "2012-07-06T05:32:29Z", free_comment: "", how_year: 1, id: 1, languages: "", locale: "", updated_at: "", why: "" },
プロパティがnullだったり、空だったりすると、前者のようにプロパティオブジェクトが取得できませんでした。
普通のControllerのJsonResultだと、そんなことはなかったのですが…。
http://forums.asp.net/t/1811144.aspx/1
ここのサイトを参考にして、
App_Startにて
{
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings();
}
とかくと直りました。これでよいのでしょうか…。
knockout.js
knockout.jsを初めて使いました。
複雑な処理をしようとすると、難しくなりそうという印象です。
コードはこんな感じです。
.js
$(function () { var answerLoadUrl = "/api/answer"; var data = []; var viewModel = { answers: ko.observableArray(data) }; ko.applyBindings(viewModel); $.ajax({ url: answerLoadUrl, success: function (answers) { viewModel.answers(answers); } }); });
html
<ul id="answers-content" data-bind="foreach: answers" class="unstyled"> <li> <div class="why"> <span class="title label large">なぜ?</span> <div class="content"> <ul data-bind="foreach: why_reasons"> <li data-bind="text:$data"></li> </ul> </div> </div> <div class="how-year""> <span class="title label">コード歴</span> <div class="content" data-bind="text:how_year"></div> </div> <div class="locale" > <span class="title label">活動拠点</span> <div class="content" data-bind="text:locale"></div> </div> <div class="free-comment" > <span class="title label">コメント</span> <div class="content" data-bind="text:free_comment"></div> </div> <div class="info"> <span class="by label">app by</span> <div data-bind="text:app_name"></div> <span class="creation-date label">日付</span> <div data-bind="text:created_at"></div> </div> </li> <li> <hr /> </li> </ul>
実際に使っていくとなると、しばやんさんの
knockout.js の注意すべき点
がとても参考になりそうです。
よかったところ
Htmlの修正が楽だった!
例えば、
<div> .... .... </div>
これをspanタグに直したい!ってなった時に、
Visual Studio 2012 RC だと、最初のdivをspanに直しただけで、
後ろの閉じタグも同時に直してくれます!
これはとても感動しました!
scriptやcssの読み込みが楽だった
MVC4の機能の1つです。
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-1.*"));
と書くと、jquery-から始まるすべてのスクリプトを読みこんでくれます。
これも大変楽になりました。
Azureデプロイが簡単だった
プロジェクト作成→Configファイル取得→デプロイ
という流れだけでAzureにあげることができました。
(以前試した時は、なかなかできなかったのですが…)
今度は、DB接続にチャレンジしたいところです。