★Windows Store apps(JavaScript) + KnockoutJS + ASP.NET Web API(F#) による開発を行うには

◆ 事前準備

1. Windowsストア ・プロジェクト(JavaScript)を新規作成
2. Windowsストア ・プロジェクトに KnockoutJS を導入
3. Windowsストア ・プロジェクトに jQuery を導入
4. オンラインテンプレート "F# C# MVC 4" を元に ASP.NET Web API プロジェクトを追加。


◆ Windowsストア ・プロジェクト

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>Sample</title>

    <!-- WinJS 参照 -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

    <!-- KnockoutJS & jQuery 参照 -->
    <script src="Scripts/knockout-2.1.0.debug.js"></script>
    <script src="Scripts/jquery-1.8.1.js"></script>    
</head>
<body>
    <button id="Exec">実行</button>
    <ul data-bind="template: { foreach: DataList }">
        <!-- KnockoutJS によるデータ・バインド -->
        <li><span data-bind="text: Id"></span></li>
    </ul>

    <script type="text/javascript">
        // ViewModel
        var data = [];
        var viewModel = {
            DataList: ko.observableArray(data)
        };
        ko.applyBindings(viewModel);

        $(function () {
            // 実行ボタン クリック処理
            $('#Exec').click(function () {
                // ASP.NET Web APIの呼び出し
                $.ajax({
                    url: 'http://localhost:59885/api/values',
                    dataType: 'json',
                    success: function (data) {
                        viewModel.DataList(data);
                    }
                });
            });
        });
    </script>
</body>
</html>


◆ ASP.NET Web API(F#) プロジェクト

namespace FsWeb.Controllers

open System.Web
open System.Web.Mvc
open System.Net.Http
open System.Web.Http
// #r "System.Runtime.Serialization"
open System.Runtime.Serialization

// データ型
[<DataContract>]  
type Model =  
    { [<DataMember>] Id : string }

type ValuesController() =
    inherit ApiController()
    
    // JSON形式で取得
    member x.Get()
        = [| { Id = "hoge1" }; { Id = "hoge2" }; { Id = "hoge3" } |]

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中