javascript - example - knockout visible

Knockout clase base ViewModel, herencia de Javascript

Question

He estado usando Knockout.js para muchos proyectos últimamente, y estoy escribiendo muchos códigos repetitivos. Me gustaría poder definir una clase BaseViewModel y hacer que mis ViewModels específicos de la página se hereden de ella. Estoy un poco confundido acerca de cómo hacer esto es Javascript. Aquí está mi BaseViewModel básico:

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

Me gustaría poder listar firmas para métodos como load en BaseViewModel y luego darles definiciones en el ViewModel hereditario. ¿Algo de todo esto es posible? He encontrado algunas soluciones en línea pero todas dependen de la definición de funciones / clases para hacer que la herencia funcione.

Answer 1

La herencia de Javascript se realiza en dos partes. El primero está en el constructor, y el segundo está en el prototipo (que no está utilizando, por lo que podría omitir).

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

Hasta su último punto, sobre la anulación de la load , no es diferente que poner una función de load en su modelo de vista normalmente. Javascript le permite anular las propiedades de cualquier objeto con cualquier cosa, no hay pasos especiales aquí.

Aquí hay un violín que demuestra la herencia.

Answer 2

Ya que su BaseViewModel solo agrega todas las propiedades / métodos a this (y no usa prototipo) es bastante fácil:

En sus nuevos modelos de vista, simplemente llame a BaseViewModel :

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