集成 KnockoutJS 可观察对象和 YUI 小部件答案

【问题标题】：Integrating KnockoutJS observables and YUI widgets集成 KnockoutJS 可观察对象和 YUI 小部件
【发布时间】：2011-07-26 21:53:50
【问题描述】：

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

YUI 的基本要求是使用myViewModel.personName('Mary') 之类的函数而不是myViewModel.personName = Mary 来设置属性，并获取myViewModel.personName() 之类的属性而不是myViewModel.personName

你有这样的例子吗？如果不是，我应该继承YAHOO.util.DataSource 还是应该用YAHOO.widget.DataTable.Formatter 实现它并实现editorSaveEvent？

为了让这种集成变得有趣，当底层的 observable 更新时，YUI 小部件将被刷新，反之亦然。此要求排除了以直接方式使用YAHOO.util.DataSource.TYPE_JSARRAY 或YAHOO.util.DataSource.TYPE_JSON。

如果你有这方面的例子，或者如果你能指出我在 YUI 中正确的地方进行钩子，请告诉我。

【问题讨论】：

标签： javascript yui knockout.js

【解决方案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/

【讨论】：