knowckout.js ViewModelに共通する処理をまとめたい

投稿日 編集日 カテゴリ

出典

http://stackoverflow.com/questions/16569810/knockout-viewmodel-base-class-javascript-inheritance

やり方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 1 共通の処理
(function (ko, undefined) {
	ko.MyBase = function () {
		var self = this;
		//  共通で使う変数とかメソッドとか
		self.test = function() {
			alert('test');
		}
	}
}(ko));

// 2 個別の画面で使うVM
function MyViewModel() {
	"use strict";

    var self = this;
	ko.MyBase.call(self);


}

// new するとき
var myVM = new MyViewModel();
myVM.test();   // alert
  • 共通の処理を 1 のように書く
  • それを使用する VM を 2 のように書く。 var self = this した後に、 ko.[ベースの名前].call(self) を呼ぶのがポイント
  • あとは普通の ViewModel として使うだけ

共通の処理に記述された内容がそのまま ViewModel に存在するのと

同様に処理されるので、お手軽に共通処理をくくり出せて便利。