Ada beberapa keuntungan menggunakan fungsi untuk menentukan model tampilan Anda.
Keuntungan utama adalah bahwa Anda memiliki akses langsung ke nilai this
yang 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 viewModel
secara langsung dalam computable observable, tetapi ia langsung dievaluasi (secara default) sehingga Anda tidak bisa mendefinisikannya dalam objek literal, seperti viewModel
yang 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 this
selalu sesuai adalah untuk menetapkan variabel dalam fungsi yang sama dengan nilai yang sesuai this
dan 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 this
sebenarnya 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.
prototype
(metode yang sering, misalnya, mengambil data dari server dan memperbarui model tampilan yang sesuai). Namun Anda masih bisa dengan jelas mendeklarasikannya sebagai properti dari objek literal, jadi saya tidak bisa melihat perbedaan.