2013-05-15 9 views
19

Son zamanlarda birçok proje için Knockout.js programını kullanıyorum ve çok fazla yinelenen kod yazıyorum. Bir BaseViewModel sınıfını tanımlamak ve sayfamıza özgü ViewModel'leri ondan elde etmek istiyorum. Bunun nasıl yapılacağı konusunda biraz kafam karışmıştı, Javascript. İşte benim BaseViewModel temel:Knockout ViewModel taban sınıfı, Javascript devralma

(function (ko, undefined) { 
    ko.BaseViewModel = function() { 
     var self = this; 
     self.items = ko.observable([]); 
     self.newItem = {}; 
     self.dirtyItems = ko.computed(function() { 
      return self.items().filter(function (item) { 
       return item.dirtyFlag.isDirty(); 
      }); 
     }); 
     self.isDirty = ko.computed(function() { 
      return self.dirtyItems().length > 0; 
     }); 
     self.load = function() { } 
    }; 
}(ko)); 

ben BaseViewModel içinde load gibi yöntemlerle için imza listeleyebilir ve sonra onları devralan ViewModel tanımlarını vermek edebilmek istiyorum. Bu mümkün mü? İnternette birkaç çözüm buldum ama hepsi miras çalışmasını yapmak için işlevler/sınıflar tanımlamaya güveniyorlar. senin BaseViewModel yana

+0

niçin 'undefined' fonksiyona geçiyorsunuz? – Tyrsius

+0

http://programmers.stackexchange.com/a/158376/90240 – gwely

+0

Huh, daha önce hiç görmedim. Ayrıca, hiçbir zaman bir hataya neden olmayan bir durumla karşılaşıyorum ve o davanın ne olduğunu açıklamıyor. – Tyrsius

cevap

17

sadece o zaman oldukça kolaydır this için özellikler/yöntemlerin hepsi ekleyerek (ve prototip kullanarak değil) olduğu:

yeni görünümü modellerinde, sadece BaseViewModel çağırır:

var MyVM = function() { 
    var self = this; 
    ko.BaseViewModel.call(self); 

    self.somethingElse = ko.observable(); 
    self.itemCount = ko.computed(function() { return self.items().length; }); 
    self.items([1, 2, 3]); 
}; 


// ... 
var vm = new MyVM(); 
+0

Eh, beklediğimden daha kolay. Şimdi sadece bunun nasıl çalıştığını anlamaya ihtiyacım var! – gwely

+0

"ko.BaseViewModel.call (self)" satırı c: 'de base:() ile aynıdır. – gwely

+1

@theyshookhands Evet, bir ': base()' çağrısı ile aynıdır. ViewModel.prototype = yeni BaseViewModel() ', C# içindeki sınıf: SubClass ile aynıdır. – Tyrsius

10

Javascript kalıtım iki parça halinde yapılır. Birincisi yapıcıda, ikincisi ise prototipte (kullanmadığınız, böylece atlayabileceğiniz). load geçersiz kılma hakkında son noktaya

var ViewModel = function(data) { 
    BaseViewModel.call(this); 
}; 
//you only need to do this if you are adding prototype properties 
ViewModel.prototype = new BaseViewModel(); 

, onun farksız olduğunu normalde ViewModel bir load işlevi koyarak. Javascript, herhangi bir nesne özelliğini herhangi bir şeyle değiştirmenize izin verir, burada özel adımlar yoktur.

İşte bir fiddle demonstrating devralmadır.

+0

Sadece modern tarayıcıları desteklemekten endişe duymanız gerekiyorsa, bu son satırı 'Viewmodel.prototype = Object.create (BaseViewModel.prototype) ile değiştirebilir ve' BaseViewModel' işlevini çağırmanın istenmeyen etkilerinden kaçınabilirsiniz. yol. – Brandon

+0

Ve eski tarayıcılarda Object.create' kullanmak çok kolay: 'var objCreate = Object.create || işlev (o) {işlev F() {}; F.prototip = o; yeni F() döndürün; }; ' –