ViewModelの定義パターン
まず、コンストラクタを使うかどうかで迷って、使わない場合にはdependentObservableからViewModelをどう参照するかに迷います。
どれがいいんでしょうねー?
パターン1: コンストラクタを使う
まぁ、ふつうです。
ただ、コンストラクタ呼び出しはnewを忘れると気づきにくいから避けるべきみたいな言説もあり、その点でどうしよう?と思います。
var ViewModel = function() { this.arg1 = ko.observable(0); this.arg2 = ko.observable(0); this.result = ko.dependentObservable(function() { var arg1 = parseInt(this.arg1(), 10); var arg2 = parseInt(this.arg2(), 10); return arg1 + arg2; }, this); }; ko.applyBindings(new ViewModel());
パターン2: コンストラクタを使わない & dependentObservableからはthisでViewModelを参照
コンストラクタを使わない場合はこんな感じ。dependentObservableの第2引数でViewModelを渡して、第1引数の関数からthisでアクセスできるようにしています。
var viewModel = { arg1: ko.observable(0), arg2: ko.observable(0) }; viewModel.result = ko.dependentObservable(function() { var arg1 = parseInt(this.arg1(), 10); var arg2 = parseInt(this.arg2(), 10); return arg1 + arg2; }, viewModel); ko.applyBindings(viewModel);
パターン3: コンストラクタを使わない & dependentObservableからはクロージャでViewModelを参照
thisが何を指しているかわかりにくいとか、dependentObservableの第2引数でviewModelを渡すのを忘れがちだとかを問題にするなら、こう。
var viewModel = { arg1: ko.observable(0), arg2: ko.observable(0) }; viewModel.result = ko.dependentObservable(function() { var arg1 = parseInt(viewModel.arg1(), 10); var arg2 = parseInt(viewModel.arg2(), 10); return arg1 + arg2; }); ko.applyBindings(viewModel);
パターン4: コンストラクタを使わない & dependentObservableからはクロージャでViewModelを参照 & dependentObservableを{}中で定義
パターン2とパターン3はdependentObservableをobservableと一緒に定義できないのがいやなんですよねー。一緒に定義するには、評価を遅延する必要があります。
(デフォルトのままだと、dependentObservableに渡す関数が実行されるタイミングでまだViewModelがundefinedなので)。
var viewModel = { arg1: ko.observable(0), arg2: ko.observable(0), result: ko.dependentObservable(function() { var arg1 = parseInt(viewModel.arg1(), 10); var arg2 = parseInt(viewModel.arg2(), 10); return arg1 + arg2; }, null, {deferEvaluation: true}) }; ko.applyBindings(viewModel);
結論
コンストラクタを使うのが一番シンプルな気がします。