Question

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 be 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.

Answer 1

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/