KnockoutJS observablesとYUIウィジェットを統合する

Question

KnockoutJSとYUIを統合する必要があります。私は観測可能な観測可能な配列を持つKnockoutJSで作成されたいくつかのビューモデルを持っています。 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の適切な場所に私を指し示すことができるかどうか教えてください。

Answer 1

私は何か働いています。私はこのようなフォーマッタを使用しています：

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

そして、このような編集者：

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

：

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

私はここに住んでサンプルを持っています