knockoutjs勉強会 – 2014/07/12 – Microsoft 大阪

感想

こんにちは、野呂です。
http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro-5000492

大阪でknockoutjs勉強会にスタッフとして参加しました!!
KnockoutJS Japan User Group(KJJUG)

KnockoutJS と Angular + Sencha (ExtJS) についてLiveハンズオンや機能の紹介など行い、
その後は、チーム分けしてハンズオンを行いました。

  1.  鈴木さんのLiveハンズオンは、とてもわかりやすく、全員、習得できたと思います!!
  2. 宇野さんのSencha Liveハンズオンは 、Senchaを初めてみて、よくできた、製品だと思いました!
  3. 佐川さんのAngularは、おお、Angularはノンプロミングでここまでできるんだとわかりました!!
  4. 自分は、VisualStudio+KnockoutJS+TypeScript+Office365+Cordovaでこういうことができますというのを説明させていただきました!

皆さまありがとうございました!!

主催をして頂きました。佐川さん司会、調整等ありがとうございました!!

勉強会twitterハッシュタグ

#kjjug

勉強会風景

大阪Microsoft入口

ko_20140712_entrance

受付嬢

yu
始まりの挨拶、佐川さん

ko_20140712_indexMVVM_min

手を挙げる自分

ko_20140712_snoro2

懇親会

ko_20140712_drink1

隣の部屋で開催していた人たちと、一緒の場所で懇親会!総勢39人

ko_20140712_drink1_together

スライド/ブログ

鈴木様

日本語ドキュメントの紹介

本家のチュートリアルを使用した, Liveハンズオン

ko_20140712_livehandson

佐川様

Angular JSハンズオン@大阪

ko_20140712_angular

宇野様

Sencha Fiddleを使ったライブハンズオン

https://fiddle.sencha.com/#fiddle/7ks

ko_20140712_sencha

野呂資料

20140712 knockoutjs-hands-on-in-osaka


 

タイトル

初心者向けJavaScript入門からテラ・コーディングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているKnockoutJSを堪能する!Sencha Ext JSのMVVMもやります!

[内容]

13:00-13:30 受付
13:30-14:30 ライトニングトーク
14:30-18:00 技術レベルに応じてグループ分け・ハンズオン
18:30-20:30 懇親会

[ハンズオングループ]
Aグループ:knockoutjsの基本的なチュートリアル
Bグループ:Visual Studioを使ってknockoutjs
Cグループ:knockoutjsコーディング
Dグループ:Sencha Ext JSコーディング

TypeScript+KnockoutJSアプリ (Visual Studio2013)

概要

TypeScript+KnockoutJSアプリのハンズオンを行うための資料です。

初心者向けJavaScript入門からテラ・コーディングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているKnockoutJSを堪能する!Sencha Ext JSのMVVMもやります!

typescriptKnockout010


/index.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <form data-bind="submit: save">
        <p>欲しいものリスト: <span data-bind="text: gifts.length"> </span> 点</p>
        <table data-bind="visible: gifts.length > 0">
            <thead>
                <tr>
                    <th>名前</th>
                    <th>価格</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: gifts">
                <tr>
                    <td><input type="text" data-bind="value: name" /></td>
                    <td><input type="text" data-bind="value: price" /></td>
                    <td><a href="#" data-bind="click: $root.removeGift">削除</a></td>
                </tr>
            </tbody>
        </table>

        <button data-bind="click: addGift">追加</button>
        <button type="submit" data-bind="enable: gifts.length > 0">登録</button>
    </form>

    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/knockout-es5.js"></script>
    <script src="app.js"></script>

</body>
</html>

 

/app.js

/// <reference path="scripts/typings/knockout/knockout.d.ts" />
/// <reference path="scripts/typings/knockout.es5/knockout.es5.d.ts" />

function bindMySelf(viewModel: any, functionNames: string[]): void {
    functionNames.forEach((functionName) => {
        viewModel[functionName] = viewModel[functionName].bind(viewModel);
    })
}

class ItemViewModel {
    constructor(public name: string, public price: number) {
        ko.track(this); // プロパティ (name, number) を監視できるようにする
    }
}

class GiftSetViewModel {
    constructor(public gifts: ItemViewModel[]) {
        ko.track(this);
        // メンバ関数を View 公開できるようにする
        bindMySelf(this, ['addGift', 'removeGift', 'save']);
    }

    addGift(): void {
        this.gifts.push({
            name: "",
            price: 0
        });
    }

    removeGift(gift: ItemViewModel): void {
        this.gifts.remove(gift);
    }

    save(): void {
        alert('次のようにサーバに送信できます:' + ko.toJSON(this.gifts));
    }
}

ko.applyBindings(new GiftSetViewModel([
    new ItemViewModel('高帽子', 39.95),
    new ItemViewModel('長いクローク', 120.00)
]));

 

 

参考