Calendarの13日目の記事です。3日目の分割アプリケーションとグリッドアプリケーションも書きましたので2巡目ですね。今回は現在学習中のJavaScript+HTMLプロジェクトでデータバインディングを行う方法を中心にJavaScript+HTMLプロジェクト全般の話をしようと思います。OOSAKAに参加して来ました」参照)。開発中のアプリでもHTMLでデザイン部分、C#でロジックというスタイルを試す機会があったのでちょうど良いタイミングでした。データバインディングとは?.NET開発者は勝手知ったるですが、JS+HTMLで開発するような方は案外知らないんじゃないかなと思うんですがどうでしょう?データバインディングを用いるとロジック(JavaScript)側のコードのプロパティを変更すると連動して表示を変えることができます。その際に素晴らしいのはJS側の値を適用する表示側のコントロールおよびそのプロパティを知る必要が無いということです。一般的な例としてJSでHTMLの値を変えるコードは以下です。"変更する値";この場合HTML側にhogeというIDを振られたコントロールがあること、textContentというプロパティを持つことをロジック側(JS)が知らないとダメということになる。私の知っているデータバインディングはこの辺の依存を解消してくれる(はず)。一つはJSのプロパティの変更に合わせて見た目を変更する際にデータバインディングを用いないと以下のように合わせて処理を記述する必要がある。"hogeo";これはミスの元だ。いう手間もデータバインディングは解消してくれる。いうのがC#の経験からデータバインディングだがJS版はどうだろうか?データバインディングの実装データバインディングがどんなものか(うっすら)わかった!!ではJavaScript+HTMLでこれをやるとどうなるかというと以下のようなコードになる。></div></div>HTML側は以下のようにあID:bindAreaにnameとageという名前を持った2つのdivタグがありdata-win-bindというプロパティもあります。data-win-bindの値は”innerText:nameProp;”なんとなくinnerTextの値を書き換えそうな予感がします。このアプリケーションは新しく起動しました。このアプリケーションは中断状態から再度アクティブ化されました。ここでアプリケーションの状態を復元します。Binding.as(person);こんな感じでバインド可能になるように加工してあげます。バインド可能になったら以下ののようにバインドの設定。});すると、bindAreaをクリックすることでnamePropとagePropを書き換えます。これに連動してHTML側の値も変わります。JS側の値を変えると自動でHTMLが変わるというのは先にデータバインディングの説明で書いた動きですね。これで値は変えたけどHTML側を変更するコードを書き忘れたという事態が回避できます。});残念ながらtextContentというプロパティ指定がはっきりと書かれています。この辺のメリットは享受できない模様、残念。メリットが少ないかも?という感じでC#版よりちょっと見劣りする挙動なJavaScriptのデータバインディング。私がJSでのコーディングに明るくないせいで、本当はもっとデータバインディングするメリットがあるかもしれません。いう感じで多少宿題を残した感じでデータバインディングの説明でした。おまけ、Windowsランタイムコンポーネントでバインド失敗ここからは追記、表示側はHTMLで作成してロジックはC#で書こうと思いました。C#のobjectをBinding.asメソッドに渡しても拡張不能な変数としてエラー。C#で拡張可能といえば、DynamicObjectだろうと思ったらWindowsランタイムコンポーネントではDynamicObjectが使えない模様。くそっ、いろいろできないぜWindowsランタイムコンポーネント!!というわけで、winmetadataの資料をあさっているんですが、確たる情報が得られない・・・・。この辺は引き続き研究ということで・・・。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですCommentName*Email*Website古代魚庵という屋号でフリーランスのプログラマー兼ライター業をやっています。