ソースコードから理解する技術－ＵｎｄｅｒＳｏｕｒｃｅＣｏｄｅ

手を動かす(プログラムを組む)ことで技術を理解するブログ

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

ASP.NET

タイトルの通り、WebMatrixでknockout.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さん、ありがとうございました。