javascript - 集成 KnockoutJS 可观察对象和 YUI 小部件

Question

我需要在 KnockoutJS 与 YUI 之间进行集成。我有一些使用 KnockoutJS 创建的 View 模型，它们具有可观察对象和可观察数组。我想使用 YUI DataTable 编辑数据，同时保留可观察的行为。

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 中正确的位置以进行 Hook ，请告诉我。

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/