Nakavt arasındaki fark Görünüm Nesne değişmezi olarak işlevler olarak bildirilen modeller

Nakavt js Ben Görünüm Modelleri ya da olarak beyan bakın:

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

ko.applyBindings(viewModel );

veya:

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

ko.applyBindings(new viewModel ());

Varsa ikisi arasındaki fark nedir?

Ben buldunuz Bu tartışmayı grubunu google knockoutjs üzerinde ama gerçekten bana tatmin edici bir cevap vermedi.

Modeli bazı verilerle başlatmak istersem bir neden görebilirim, örneğin:

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

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

Ama bunu yapmazsam hangi stili seçtiğim önemli mi?

Görünüm modelinizi tanımlamak için bir işlev kullanmanın birkaç avantajı vardır.

Ana avantajı, thisoluşturulan örneğe eşit olan bir değere anında erişebilmenizdir . Bu, şunları yapabileceğiniz anlamına gelir:

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

Böylece, hesaplanan gözlemlenebiliriniz thisfarklı bir kapsamdan çağrılsa bile uygun değerine bağlanabilir .

Bir nesne değişmeziyle şunları yapmanız gerekir:

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

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

Bu durumda şunu kullanabilirsiniz viewModelsiz, nesnesi değişmez içinde tanımlamak olamazdı bu yüzden bilgisayarlı gözlemlenebilir doğrudan, ancak (varsayılan olarak) hemen değerlendirilir olsun demek viewModelnesne değişmezi kapalı sonrasına kadar tanımlı değil. Birçok kişi, görünüm modelinizin oluşturulmasının tek bir çağrıda yer almamasını sevmez.

thisHer zaman uygun olmasını sağlamak için kullanabileceğiniz başka bir desen , işlevde uygun değere eşit bir değişken ayarlamak thisve bunun yerine kullanmaktır. Bu şöyle olurdu:

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

Şimdi, tek bir öğenin ve çağrının kapsamındaysanız $root.removeItem, değeri thisaslında o düzeyde bağlanan veriler olacaktır (bu öğe olacaktır). Bu durumda kendini kullanarak, genel görünüm modelinden kaldırıldığından emin olabilirsiniz.

bindModern tarayıcılar tarafından desteklenen ve desteklenmiyorsa KO tarafından eklenen başka bir seçenek kullanmaktır . Bu durumda, şöyle görünecektir:

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

Bu konuda söylenebilecek çok daha fazlası ve keşfedebileceğiniz birçok desen (modül deseni ve ortaya çıkan modül deseni gibi), ancak temel olarak bir işlevi kullanmak, nesnenin nasıl oluşturulduğu ve referans verme yeteneği üzerinde daha fazla esneklik ve kontrol sağlar. örneğe özel değişkenler.

Benzer olsa da, farklı bir yöntem kullanın:

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

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

Birkaç neden:

1. Kullanmayın this, içinde kullanıldığında karışıklık olabilir ko.computedvb.
2. Benim viewModel bir singleton, birden fazla örnek oluşturmak gerekmez (yani new viewModel())