Comprehensive class system & storage solution for KO

[Herberth Amaral]

Hi guys, how're you doing?

I'm in the process of writing a medium-size KO application and I found some difficulties. The first one relates to JavaScript classes & inheritance. Not all people on my team is an good JavaScript programmer, so I have to make sure all the code base is easily understandable. That's why I'm looking for a class system that plays nicely with Knockout.

I found the excellent JS.Class (http://jsclass.jcoglan.com/), but it does not play smoothly with KO: all the observables and dependent observables (computed) must be declared inside the class constructor. Because of this, I'm looking for a more comprehensive and Knockout friendly class system. 

The other concern I have is about persistence. I'm about to write my own data abstraction layer, but I want some advice first. I need to have an data layer that has support for different types of storage (memory, localstorage and REST-like). Do you guys know some library that plays nicely with KO? 

Thank you very much!

[Maverix]

I have been using the very excellent ScriptSharp project. which lets
you write in C# and outputs native javascript.

It supports jQuery and Knockout

[Herberth Amaral]

On Tue, Mar 20, 2012 at 8:00 PM, Maverix <andre...@live.com.au> wrote:

I have been using the very excellent ScriptSharp project. which lets
you write in C# and outputs native javascript.

It supports jQuery and Knockout

For sure it is awesome, but I'm writing my backend on Python. Thank you very much, by the way :)

--
Herberth Amaral
http://herberthamaral.com

[Michael Best]

I'm using Objs (https://github.com/tekool/objs), but the problem you
describe comes from Javascript itself. This is what I've set up so I
can specify observables in the prototype:

/**
* Knockout prototyping helpers
*/
(function(ko) {
var addExtenders = function(extenders) { this.extenders =
extenders; };

ko.observable.proto = function(initialValue) {
return {
v: initialValue,
extend: addExtenders,
activate: function() {
return ko.observable(initialValue);
}
};
}
ko.observableArray.proto = function() {
return {
extend: addExtenders,
activate: function() {
return ko.observableArray();
}
};
}
ko.computed.proto = function(readFunction) {
return {
extend: addExtenders,
activate: function(binding) {
return ko.computed(readFunction, binding,
{deferEvaluation:true});
}
};
}
})(ko);

/**
* Base classes
*/
var ViewBase = Objs('View', {
initialize : function() {
for (var prop in this) {
if (this[prop] && this[prop].activate) {
this[prop] =
this[prop].activate(this).extend(this[prop].extenders);
}
}
}
});

/* example of usage */

var Page = Objs('View.Page', 'View', {
initialize : function(id, title) {
Page.$super.initialize.call(this);
this.id = id;
this.title = title;
this.parent = null;
},
isCurrent: ko.observable.proto(false),
isLoaded: ko.observable.proto(false),
isVisible: ko.computed.proto(function() {
return this.isCurrent() && this.isLoaded();
})
});