RSS 2.0
単純にJSON文字列からJavascriptオブジェクトを相互に変換する場合は JSON.parse や JSON.stringify を使えますが Javascriptオブジェクトやサーバーサイドで取得したJSON形式の文字列を オブザーバブルなビューモデルに変換したい場合はどうすればよいでしょうか。手動で変換することもできますが、Knockoutのサイトでは ソリューションとしてmapping プラグインを公開しています。詳細な使い方は次のURLを参照してください。オプションを使用することでマッピング時の動作(特定のプロパティをマッピングから無視したり単純にコピーする等)をカスタマイズできます。
Mapping
http://knockoutjs.com/documentation/plugins-mapping.html
今回は mapping プラグインの簡単な使い方の覚書をサンプルコードで記載しておきます。
動作確認は KnockoutJSの 3.3 で行っています。
1. JavascriptオブジェクトやJSONオブジェクトからオブザーバブルなビューモデルを作成する
JavascriptオブジェクトやJSONオブジェクトからObservableなビューモデルを作成するには mappingプラグインの fromJS, fromJSON を使用します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div data-bind="with:account">
<h1>こんにちは <span data-bind="text:name"></span>さん</h1>
<p data-bind="text:hobby"></p>
<a data-bind="attr :{href:website}, text: 'ホームページ'"></a>
</div>
<ul data-bind="foreach:phones">
<li data-bind="text:name"></li>
</ul>
<script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
<script type="text/javascript" src="/Scripts/knockout.mapping.js"></script>
<script type="text/javascript">
function ViewModel(account, phones) {
var self = this;
self.account = ko.mapping.fromJS(account);
self.phones = ko.mapping.fromJSON(phones);
}
var account = {
name: "KO 太郎",
website: "http://www.yahoo.co.jp",
hobby : "釣り"
}
var phones = '[{"name":"Windows Phone"},{"name":"iPhone"},{"name":"Android"}]';
var vm = new ViewModel(account, phones);
ko.applyBindings(vm);
</script>
</body>
</html>
mapping.toJS や toJSON で逆にプレーンなJavascriptやJSON文字列に変換することもできます。
今回のサンプルでは紹介していませんが、更新する場合も fromJS, fromJSONを使用できます。またオプションを渡すことでマッピングの動作をカスタマイズすることができるようになっています。詳細はドキュメントを参照してください。