Integrating KnockoutJS observables and YUI widgets

I need to integrate between KnockoutJS with YUI. I have some view models created with KnockoutJS that have observables and observable arrays. I would like to use the YUI DataTable to edit the data while also preserving the observable behavior.

The basic requirement is for YUI to set properties using a function like myViewModel.personName('Mary') instead of myViewModel.personName = Mary and get properties like myViewModel.personName() instead of myViewModel.personName

Do you have an example of something like this working? If not, should I subclass YAHOO.util.DataSource or should I implement this with a YAHOO.widget.DataTable.Formatter and implementing the editorSaveEvent?

For this integration to be interesting, the YUI widgets would 开发者_如何学Pythonbe refreshed when the underlying observable is updated and vice versa. This requirement rules out using YAHOO.util.DataSource.TYPE_JSARRAY or YAHOO.util.DataSource.TYPE_JSON in the straightforward way.

Please let me know if you have an example of this or if you can point me to the right place in YUI to hook.

I got something working. I'm using a formatter like this:

var observableFormatter = function(elLiner, oRecord, oColumn, oData) {
        elLiner.innerHTML = oData();
};

And an editor like this:

var lang = YAHOO.lang;

YAHOO.namespace('SAMPLE');

YAHOO.SAMPLE.ObservableCellEditor = function(oConfigs) {
    YAHOO.SAMPLE.ObservableCellEditor.superclass.constructor.call(this, oConfigs);
    YAHOO.SAMPLE.ObservableCellEditor.prototype.resetForm = function() {
        this.textbox.value = this.value();
    };
    YAHOO.SAMPLE.ObservableCellEditor.prototype.save = function() {
        // Get new value
        var inputValue = this.getInputValue();
        var validValue = inputValue;

        // validation code removed. Not needed for this sample.

        var oSelf = this;
        var finishSave = function(bSuccess, oNewValue) {
            var oOrigValue = oSelf.value;
            if (bSuccess) {
                // Update observable with the new value             
                oSelf.value(oNewValue);

                //trigger the data table to redraw               
                oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oSelf.value);

                // Hide CellEditor
                oSelf._hide();

                oSelf.fireEvent("saveEvent", {
                    editor: oSelf,
                    oldData: oOrigValue,
                    newData: oSelf.value
                });
            }
            else {
                oSelf.resetForm();
                oSelf.fireEvent("revertEvent", {
                    editor: oSelf,
                    oldData: oOrigValue,
                    newData: oNewValue
                });
            }
            oSelf.unblock();
        };

        this.block();
        if (lang.isFunction(this.asyncSubmitter)) {
            this.asyncSubmitter.call(this, finishSave, validValue);
        }
        else {
            finishSave(true, validValue);
        }
    };
};

YAHOO.lang.extend(YAHOO.SAMPLE.ObservableCellEditor, YAHOO.widget.TextboxCellEditor);

I have a live sample here:

http://jsfiddle.net/chrisschoon/pLPfw/