WebMatrixでknockout.jsを動かしてみた

タイトルの通り、WebMatrixknockout.jsを動かしてみました。

WebMatrixを使ってみたのは、12/15日に行われた技術ひろば.netにて
Razor 構文と ASP.NET Web ページ」の印刷版を頂いたのがキッカケです。

knockout.jsについては詳しくは書きませんが、簡単に言えばWebでMVVMパターンを実現するための
スクリプトです。

以下が、自分が行った手順です。とはいっても、knockout.jsはスクリプトなので
他のフレームワーク(ASP.NETやPlay frameworkとか)でもポイントは同じはずです。

まずは事前準備です。

1.knockout.jsをダウンロードする
knockout.jsの"Download"ボタンよりダウンロードしてください。

2.WebMatrixにて新規にサイトをつくる
今回はテンプレートの「スターターサイト」を使用してサイトを作成しました。

3.knockout.jsを配置する
サイト内にknockout.jsを置きます。今回は"Scripts"フォルダを作成し、その中に置きました。


次に、ソースの記述です。今回はトップページであるDefault.cshtmlに記述しました。

Default.cshtml


@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Welcome!";
}

<script src="/Scripts/knockout-1.2.1.js" type="text/javascript"></script>

<table>
<tr>
<td>User ID:</td>
<td><input data-bind="value: userId" /></td>
</tr>
<tr>
<td>Domain Name:</td>
<td><input data-bind="value: domainName" /></td>
</tr>
</table>

<p>mail address: <span data-bind="text: mailAddress"></span></p>

<script type="text/javascript">
var viewModel = {
userId: ko.observable("UnderSourceCode"),
domainName: ko.observable("xxxx.com")
};

viewModel.mailAddress = ko.dependentObservable(function() {
return this.userId() + "@@" + this.domainName();
}, viewModel);

ko.applyBindings(viewModel);
</script>

ソースのポイントは以下の通りです。

1.knockout.jsをインポートする
<script src="/Scripts/knockout-1.2.1.js" type="text/javascript"></script>
でインポートしています。

2.ViewであるHTMLを上に記述し、ViewModelであるスクリプトを下に記述する
恥ずかしながら、これに気づかずに少々苦戦しました。
このソースでは、<p>mail address: <span data-bind="text: mailAddress"></span></p> より上のViewを上に、
<script type="text/javascript"> 以降のViewModelを下に記述しています。


実行すると、こんな感じの画面が表示されます。
f:id:UnderSourceCode:20111218213617j:plain
knockout.jsについては細かくは説明しませんが、ViewModelにて定義した値が("UnderSourceCode","xxxx.com")が
テキストボックスにバインドされています。


次にViewにてUser ID テキストボックスの値を変更すると・・・
f:id:UnderSourceCode:20130504100946j:plain


変更がViewModelに通知され、ViewModelのmailAddressプロパティにて再作成した値が
Viewのmail address 欄に表示されます。
f:id:UnderSourceCode:20130504101000j:plain


以上です。今回は、単にknockout.jsが動くかを試しただけでした。
が、いづれCRUDなどもう少し複雑なこともMVVMパターンを用いて試してみたいと思います。

最後に、技術ひろばの主催者であるseosoftさん、ありがとうございました。