Perbedaan antara View Model KO dinyatakan sebagai objek literal vs fungsi

Di knockout js saya melihat View Models dideklarasikan sebagai:

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

ko.applyBindings(viewModel );

atau:

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

ko.applyBindings(new viewModel ());

Apa perbedaan antara keduanya, jika ada?

Saya memang menemukan diskusi ini di grup google knockoutjs tetapi tidak benar-benar memberi saya jawaban yang memuaskan.

Saya dapat melihat alasannya jika saya ingin menginisialisasi model dengan beberapa data, misalnya:

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

var person = ... ;
ko.applyBindings(new viewModel(person));

Tetapi jika saya tidak melakukan itu bedanya gaya mana yang saya pilih?

Ada beberapa keuntungan menggunakan fungsi untuk menentukan model tampilan Anda.

Keuntungan utama adalah bahwa Anda memiliki akses langsung ke nilai thisyang sama dengan instance yang dibuat. Ini berarti Anda dapat melakukan:

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

Jadi, komputer yang Anda hitung dapat diikat ke nilai yang sesuai this, bahkan jika dipanggil dari ruang lingkup yang berbeda.

Dengan objek literal, Anda harus melakukan:

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

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

Dalam hal itu, Anda bisa menggunakan viewModelsecara langsung dalam computable observable, tetapi ia langsung dievaluasi (secara default) sehingga Anda tidak bisa mendefinisikannya dalam objek literal, seperti viewModelyang tidak didefinisikan sampai setelah objek literal ditutup. Banyak orang tidak suka bahwa pembuatan model tampilan Anda tidak dienkapsulasi menjadi satu panggilan.

Pola lain yang dapat Anda gunakan untuk memastikan bahwa thisselalu sesuai adalah untuk menetapkan variabel dalam fungsi yang sama dengan nilai yang sesuai thisdan menggunakannya. Ini akan seperti:

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

Sekarang, jika Anda berada dalam ruang lingkup item individu dan panggilan $root.removeItem, nilai thissebenarnya akan menjadi data yang terikat pada level tersebut (yang akan menjadi item). Dengan menggunakan diri dalam kasus ini, Anda dapat memastikan bahwa itu dihapus dari model tampilan keseluruhan.

Pilihan lain adalah menggunakan bind, yang didukung oleh browser modern dan ditambahkan oleh KO, jika tidak didukung. Dalam hal ini, akan terlihat seperti:

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

Ada banyak lagi yang bisa dikatakan tentang topik ini dan banyak pola yang dapat Anda jelajahi (seperti pola modul dan pola pola pengungkapan), tetapi pada dasarnya menggunakan fungsi memberi Anda lebih banyak fleksibilitas dan kontrol atas bagaimana objek dibuat dan kemampuan untuk referensi variabel yang bersifat pribadi untuk instance.

Saya menggunakan metode yang berbeda, meskipun serupa:

var viewModel = (function () {
  var obj = {};
  obj.myVariable = ko.observable();
  obj.myComputed = ko.computed(function () { return "hello" + obj.myVariable() });

  ko.applyBindings(obj);
  return obj;
})();

Beberapa alasan:

1. Tidak menggunakan this, yang dapat membingungkan ketika digunakan dalam ko.computeds dll
2. ViewModel saya adalah singleton, saya tidak perlu membuat banyak instance (yaitu new viewModel())