## ノックアウト ビュー モデル: オブジェクト リテラルと関数 - どちらが優れていますか?

ノックアウト ビュー モデルを宣言するためのオブジェクトと関数

Knockout JS では、ビュー モデルはオブジェクト リテラルまたは関数として宣言できます。次の例を考えてみましょう。

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

ko.applyBindings(viewModel );

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

ko.applyBindings(new viewModel ());

どちらのアプローチでも同じ目的を達成できますが、ビュー モデルを関数として定義すると、いくつかの利点があります。

「this」への直接アクセス

関数内で、「this」は作成されるインスタンスを指します。これにより、View Model のオブザーバブルと計算されたプロパティに簡単にアクセスできるようになります:

var ViewModel = function(first, last) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.full = ko.computed(function() {
     return this.first() + " " + this.last();
  }, this);
};

対照的に、オブジェクト リテラルを使用する場合、計算されたオブザーバブル内で明示的なコンテキスト バインディングが必要です:

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

カプセル化と変数プライバシー

関数は、グローバル スコープに公開されないプライベート変数を定義できるため、ビュー モデルに対してより自然なカプセル化を提供します。これにより、偶発的な上書きや競合を防ぐことができます。

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

最後に、関数は「bind」メソッドを使用して簡単にバインドできるようになり、コールバック関数の正しいコンテキストが保証されます。

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

要約、ノックアウト ビュー モデルを定義する方法は両方とも有効ですが、関数を使用すると、柔軟性、制御、カプセル化の利点が高まります。これらの利点により、関数はより複雑で保守しやすいビュー モデルにとって好ましい選択肢となります。

以上が## ノックアウト ビュー モデル: オブジェクト リテラルと関数 - どちらが優れていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。