## 淘汰視圖模型：物件文字與函數 - 哪個更好？

宣告 Knockout 視圖模型的物件與函數

在 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」指的是正在建立的實例。這允許輕鬆存取視圖模型的可觀察量和計算屬性：

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);
};

總結，雖然兩種定義Knockout 視圖模型的方法都是有效的，但使用函數提供了更大的靈活性、控制和封裝優勢。這些好處使函數成為更複雜和可維護的視圖模型的首選。

以上是## 淘汰視圖模型：物件文字與函數 - 哪個更好？的詳細內容。更多資訊請關注PHP中文網其他相關文章！