Mappingプラグイン（その１）

これはKnockoutJSアドベントカレンダー１７日目の記事です。

KnockoutJS Advent Calendar 2014 - Qiita

MappingプラグインはKnockoutJS公式のドキュメントに唯一書かれてあるプラグインです。
http://knockoutjs.com/documentation/plugins-mapping.html

公式ドキュメントには色々書いてありますが、簡単に言うと
「JSのオブジェクト内のプロパティや配列を observable / observableArray に変換」するプラグインです。

個人的にはばっちりハマるパターンにまだ落とし込めてないので良さげなパターンあれば教えて欲しいです。

下図の Model 部分についてサーバからJSONを取得してマッピングさせるときに便利なんじゃないかと思います。
※公式ドキュメントでは view model って言っているんですが observable / observableArray だけのViewModelって
あんま使い途なさそうでその辺の説明の意図がよく分かっていません。

http://www.wisetechglobal.com/Portals/WTG/downloads/WTF04-Slides/index.html#11

では最初にAPIを見ていきます。

基本的に使うものは以下の４つです。

(1) ko.maping.fromJS
(2) ko.mapping.toJS
(3) ko.mapping.fromJSON
(4) ko.mapping.toJSON

(1) は JSオブジェクト内のプロパティや配列を observable / observableArray に変換します。
実際やってみると以下のような感じになります。

var data = {
    first: 'Hello',
    last: 'World',
    name: ['h','e','l','l','o']
};
var model = ko.mapping.fromJS(data);
console.log(model.first);
console.log(model.first());
console.log(model.first.peek());
console.log(model.name);
console.log(model.name());
console.log(model.name.peek());

出力結果

function d(){if(0<arguments.length)return d.Pa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Jb(d);return c}
Hello
Hello
function d(){if(0<arguments.length)return d.Pa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Jb(d);return c}
["h", "e", "l", "l", "o"]
["h", "e", "l", "l", "o"]

(2) は逆にJSONオブジェクトに変換します。
こんな感じ。

function ViewModel(){
      var self = this;
      self.first = ko.observable('Hello');
      self.last = ko.observable('World');
      self.name = ko.observableArray(['h','e','l','l','o']);
}
var jsObj = ko.mapping.toJS(new ViewModel());
console.log(jsObj);

出力結果

Object {
  first: "Hello",
  last: "World",
  name: Array[5]
      0: "h"
      1: "e"
      2: "l"
      3: "l"
      4: "o"
      length: 5
      __proto__: Array[0]
  __proto__: Object
}

(3)と(4)はソース読むとすぐ分かるのですが、
(3) は ko.utils.parseJson() した結果を (1) に渡すだけ、
(4) は (2)の結果を ko.utils.stringifyJson() するだけになります。

次に (1) fromJSと (3) fromJSON メソッドの引数について説明します。

この２つのメソッドは引数の数と型によって動作が若干異なります。

・引数が１つの場合
データを引数にマッピングされたモデルを返します。

　例）var viewModel = ko.mapping.fromJSON(data)

・引数が２つの場合

２つめの引数が ViewModel の場合、これを更新します。

　例）ko.mapping.fromJSON(data,koMappingCreatedViewModel)

または２つめの引数をマッピングの際のオプションとして渡すことができます。

　例）var viewModel = ko.mapping.fromJSON(data,options)

・引数が３つの場合

２つめの引数をオプション、３つめの引数をターゲットとして更新します。

　例）ko.mapping.fromJSON(data, options, target)

基本的な使い方はこれだけなのですが、実際使おうとするとこれだけではなかなか難しいので、
以下のマッピング時のオプションが用意されています。

それらの使い方についてはまた次回。

明日は @sukobuto さんの「SPA で Enter キーフォーカス遷移」です！
よろしくおねがいします！