## Knockout.js のオブジェクト リテラルと関数: どちらの View Model 宣言が適切ですか?

オブジェクト リテラルとして宣言される Knockout View Model と関数の違い

Knockout.js では、View Model はオブジェクト リテラルまたは関数として宣言できます。機能。どちらのアプローチもデータとロジックをビューに公開するという目的を果たしますが、考慮すべき微妙な違いがいくつかあります。

オブジェクト リテラル宣言:

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

ko.applyBindings(viewModel );

• 単純でクリーンな構文。
• データ プロパティはすぐにビューに公開されます。
• 計算されたプロパティは、viewModel への直接バインディング (viewModel.full() など) またはバインディングとの併用が必要です。

関数宣言:

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

ko.applyBindings(new viewModel ());

関数を使用する利点:

• この値への直接アクセス:
  関数は、作成中のインスタンス (this) への即時アクセスを提供し、簡潔な計算プロパティとメソッド定義を可能にします。

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

  ログイン後にコピー
• View Model 作成のカプセル化:
  関数を使用すると、単一の呼び出し内で View Model の作成を定義でき、すべてのプロパティとメソッドが正しく初期化されることが保証されます。

• プライベートの設定self を使用した変数:
  この適切なスコープ設定で問題が発生した場合は、変数 (self) を View Model インスタンスと等しく設定し、代わりにそれを使用して正しいコンテキストを維持できます。

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

  ログイン後にコピー

• bind で this にバインドします:
  最新のブラウザでは、bind 関数を使用して、特定の関数が正しい this 値で呼び出されることを確認できます。

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

  ログイン後にコピー

どのアプローチを使用するかは、アプリケーションの特定の要件と設定によって異なります。関数宣言はより高い柔軟性とカプセル化を提供しますが、オブジェクト リテラル宣言はプライベート変数や計算プロパティが必要ない基本的なシナリオではよりシンプルで便利です。

以上が## Knockout.js のオブジェクト リテラルと関数: どちらの View Model 宣言が適切ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。