SourceChordスマートフォン用の表示で見るSourceChordC#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。2015-02-23TypeScriptでknockout.jsを使う・その2~基本的な使い方~TypeScript前回の手順で、knockout.jsをTypeScriptから使う準備ができました。SourceChord今回は、knockoutの機能を使って、様々なデータバインディングを行ってみたいと思います。knockout.jsで中心となるクラス/メソッドなどknockout.jsで頻繁に使うクラスをXAML系言語と比較してみました。以下の表のような対応関係になるかと思います。標準のWPFでは、対応する概念なし。○○ViewModel()、のようなデータコンテキスト設定処理。基本的なデータバインディングさっそくknockout.jsを使っていきたいと思います。最初は、前回のサンプルコードと似たコードで、基本的な部分を見てみたいと思います。ViewModelの作成データバインディングを行うためのViewModelを作成します。双方向データバインドができるようなプロパティを作るには、KnockoutObservable&ltT&gt型を使用します。ここではKnockoutObservable&ltstring&gt型のメンバーを持つ、AppViewModelというクラスを作りました。World!!");}次にwindowのonloadイベントで、このAppViewModelクラスのインスタンスをVMとしてセットします。(※バインド対象のDOM要素が構築されてからapplyBindする必要があるので、onloadイベントで行ってます。次に表示する画面をhtmlで作成します。VMとバインドして表示したい部分にdata-bind属性を付けていきます。以下では、bodyタグの下に&ltp&gtタグを作り、data-bind属性を指定してtextバインディングでVMのmessageプロパティをバインドしています。World!!と表示されることが確認できます。ここまでのコードは以下の通り。ko.applyBindings(viewModel);};複数のタグからバインドしてみる次は、このmessageプロパティをinputタグにもバインドし、Viewからプロパティの変更を行ってみます。同じプロパティにバインドしているpタグ側の値も、一緒に更新されることを確認します。bodyタグの下に、以下のinputタグを追加します。/></body>ここでは、valueバインディングを用いています。valueUpdateという追加パラメータで、'afterkeydown'という値を指定しています。すると、テキストボックス内でキーを押したらすぐに、VM側のプロパティが更新されるようになります。(これを付けてないと、フォーカスが外れたタイミングでの同期となります。)こんな風に、inputタグでの入力内容にpタグの表示内容が追従します。KnockoutComputed&ltT&gt型を使ってみるこの型を使うと、複数のKnockoutObservable型のプロパティに依存して値が決定するプロパティを定義することができます。lastName」の値を返すプロパティを、KnockoutComputedとして作成しています。KnockoutComputed型のプロパティを作るには、ko.computed&ltT>()メソッドに引数として、評価する内容を決定する関数を渡します。しておくと、ko.computed()メソッドに渡した評価関数内のKnockoutObservableの値が変わると、KnockoutComputedのプロパティ自身の値も一緒に更新されるようになります。第二引数には、この評価関数内でthisとして扱われるものを渡します。ここでは、このVMのインスタンスのthisを関数内でもそのまま利用したいので、第二引数にthisを渡します。この辺は、JavaScriptのthisの扱い方の面倒なポイントですね。this);しかしココはTypeScriptならではの方法でもう少し簡潔に書いてみたいと思います。以下のようにアロー関数で評価関数を作ると、関数内のthisはそのまま元のクラスのthisを表すので、以下のように書くことができます。this.lastName());実行してみると、以下のようにpタグの表示内容が、firstName/lastName両方のプロパティに依存して更新されていくことが確認できます。コードは以下のとおりです。ko.applyBindings(viewModel);};KnockoutObservableArrayでリストを扱う今度は、バインド可能なリスト要素を作るために使用する、KnockoutObservableArrayです。KnockoutObservableArray型のインスタンスを作ります。push/pop/remove/removeAllなどのメソッドなどで、リストを操作することができます。18));View側でのforeachバインディングview側では、以下のようにforeachバインドを用います。繰り返し生成したい要素の親要素で、「data-bind="foraech:・・・」という属性を付加します。すると、バインドしたKnockoutObservableArrayの要素数分だけ、子要素(この場合liタグ)が繰り返し生成されます。foreach内部の子要素タグ内では、$dataでリスト内の各要素を指し示すことができます。foreach内部では、$dataで現在のアイテムを示すことができる。</ul>XAMLで開発する時の、ItemsControl系のバインドとDataTemplateの定義をまとめて行っているような感じです。実行すると、以下のようにliタグの箇所が、リストの要素数分生成されているのが確認できます。ko.applyBindings(viewModel);};「要素数分だけDOM要素を作る」という処理が、js側でガリガリと書くのではなく、データバインディングによりhtml側で宣言的に書けるのがとてもいいですね。00:26TypeScriptでknockout.jsを使う・その2~基本的な使い方~Tweet広告を非表示にする関連記事2017-05-10CretatorsUpdateから、UWPでもTypeConverter的なものが使えるようになりま...WPFとUWPでは、同じXAMLという仕組みを用いていますが、細かい...2016-01-10electron環境でknockout.jsを使ってみるそういえば、ブログにメモしてなかったので、改めてφ(..)メモメ...2015-05-22Knockout.jsで、要素を選択できるテーブルちょっと必要に迫られて作ったので、コードだけメモ。アプリ開発Windows開発者はてなブログをはじめよう!minami_SCさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。