Question

我需要在KnockoutJS和YUI之间进行整合。我有一些使用KnockoutJS创建的视图模型，它们具有observable和可观察数组。我想使用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的正确位置，请告诉我。

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/

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

1 个答案: