読者です 読者をやめる 読者になる 読者になる

Mappingプラグイン(その1)

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


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/images/mvvm.png

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



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

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

(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 メソッドの引数について説明します。

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

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

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


・引数が2つの場合

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

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

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

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

・引数が3つの場合

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

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


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


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


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