KO ビュー モデル: オブジェクト リテラルと関数

Knockout JS では、オブジェクト リテラルまたは関数を使用してビュー モデルを宣言できます。どちらの主な目的は、監視可能なプロパティと計算関数を定義することですが、それらの主な違いは、カプセル化、柔軟性、コード構成に影響を与えます。

オブジェクト リテラル:

var viewModel = {
    firstname: ko.observable("Bob")
};

オブジェクト リテラルは、複雑なロジックや計算関数を持たない単純なビュー モデルにとっては単純で簡潔です。ただし、

• 計算関数内の事前定義されたこのコンテキストへのアクセスは提供されません。
• ビュー モデルに多くのオブザーバブルと計算関数が含まれている場合、管理が困難になる可能性があります。

関数:

var viewModel = function() {
    this.firstname = ko.observable("Bob");
};

関数にはいくつかの利点があります:

• カプセル化: 関数を使用すると、ビュー モデルとそのプロパティの作成が 1 回の呼び出し内でカプセル化されます。
• 計算関数内の this コンテキスト: this コンテキストは自動的に View Model インスタンスにバインドされ、計算関数内でそのプロパティとメソッドに簡単にアクセスできるようになります。
• 柔軟性: 関数は引数を受け取り、外部データまたは他のオブジェクトに基づいてビュー モデルを初期化するために使用できます。

ベスト プラクティス:

ほとんどの場合、関数を使用してビュー モデルを定義することをお勧めします。カプセル化と柔軟性が向上し、複雑なビュー モデルの管理が容易になり、これへの適切なアクセスが保証されます。

プライベート プロパティとメソッド:

関数ベースのビュー モデルself-pattern:

var ViewModel = function() {
    var self = this;
    self.privateProperty = ko.observable();
    self.privateMethod = function() {};
};

バインド関数:

代わりに、最新のブラウザと Knockout JS は、関数を特定のコンテキストに明示的にバインドするバインド関数を提供します:

var ViewModel = function() {
    this.items = ko.observableArray();
    this.removeItem = function(item) { this.items.remove(item); }.bind(this);
};

バインド関数を使用すると、入れ子になったスコープ内から関数を呼び出した場合でも、これが View Model インスタンスを確実に参照します。

結論:

オブジェクト リテラルと関数の両方をノックアウト ビュー モデルの定義に使用できますが、カプセル化、柔軟性、および計算関数での効率的な処理の点で関数の方が一般的に好まれます。