Интеграция наблюдаемых KnockoutJS и виджетов YUI

Question

Мне нужно интегрировать KnockoutJS с YUI. У меня есть несколько моделей представлений, созданных с помощью KnockoutJS, которые имеют наблюдаемые и наблюдаемые массивы. Я хотел бы использовать DataTable YUI для редактирования данных, сохраняя при этом наблюдаемое поведение.

Основным требованием для YUI является установка свойств с помощью функции типа myViewModel.personName('Mary') вместо myViewModel.personName = Mary и получение свойств типа myViewModel.personName() вместо myViewModel.personName

У вас есть пример того, как это работает? Если нет, я должен подкласс YAHOO.util.DataSource или я должен реализовать это с YAHOO.widget.DataTable.Formatter и реализации editorSaveEvent?

Чтобы эта интеграция была интересной, виджеты YUI обновлялись бы при обновлении базовой наблюдаемой и наоборот. Это требование исключает прямое использование YAHOO.util.DataSource.TYPE_JSARRAY или YAHOO.util.DataSource.TYPE_JSON.

Пожалуйста, дайте мне знать, если у вас есть пример этого или вы можете указать мне правильное место в YUI для подключения.

Answer 1

У меня что-то работает.Я использую такой форматер:

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

И такой редактор:

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

У меня есть живой пример:

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