"TypeError：RactiveJSアダプタでプロパティ 'VibrantImg'を設定できません

Question

シンプルなRactiveアダプタを作成して、Color Thief（http://lokeshdhakar.com/projects/color-thief/）の値を定義済みのひげ剃りのテンプレートに解析しようとしています！これをよりよく達成するための方法が、私は、アダプタのルートを使用している理由のための理由がある）

私は私がこれまでhere持っているもののデモを設定している - このRACTIVEコード部：

var colorThief = new ColorThief(); 
var img2 = document.getElementById('ctimage'); 
var imgColor; 

Ractive.adapt.CTImg = { 
    filter: function (object) { 
    return object instanceof img2; 
    }, 
    wrap: function (ractive, img2, keypath, prefixer) { 
    // Setup 

    return { 
    teardown: function(){ 
     colorThief.destroy(); 
    }, 
    get: function(){ 
     imgColor = colorThief.getColor(img); 
    }, 
    set: function(property, value){ 
     ractive.set('mainColor', imgColor); 
    }, 
    reset: function(value){ 
    } 
    } 
    } 
}; 


var ractive = new Ractive({ 
    target: '#container', 
    template: '#template', 
    adapt: [ 'CTImg' ], 
    data: { 
    mainColor: "rgb(97, 79, 112)" // this is what should be returned 
    } 
}); 

私の目的は、Codepen（上の）で与えられたイメージから目立つ色を取得し、それをRactive（そしてアダプタによってColor Thiefに渡す）、関連する口ひげで画面に結果の色を出力します。

テンプレートにハードコードされた色のOKを表示することができるので、データキーパス/参照がOKであることがわかります。しかし、私の問題は、色泥棒からアダプター経由で色が戻ってきていることです。私が取得しているエラーはUncaughtです。 "TypeError：未定義のプロパティ 'CTImg'を設定できません。

私はSOとRactive Githubのサイトをチェックして、何がうまくいかないのか理解できるかどうか確認しましたが、頭が回転し始めています！

少なくとも、Color Thiefからアダプター経由で戻ってくる色を手に入れることができますか？

Answer 1

したがってadaptとadaptorsは2つの異なる設定オブジェクトです。 adaptorsはアダプタ定義のレジストリであり、adaptはどのアダプタを使用するかをコンポーネント/インスタンスに通知します。グローバルadaptのプロパティはありません。

アダプターのグローバル登録については、Ractive.adaptorsが必要です。

次の問題は、実際にアダプタを使用する方法です。アダプターでは、非POJOデータをインスタンスに入れる必要があります。 filterはデータ上で実行され、データを適合させる必要があるかどうかを判断し、適合している場合は設定を行います。次に、通常のアダプタ設定です。それはRACTIVE、ColorThiefまたはあなたのコードだならば私たちは本当に確かに言うことはできません

Ractive.adaptors.CTImg = { 
    filter: function (object) { 
    // Detect if the data is an image element 
    return object instanceof HTMLImageElement; 
    }, 
    wrap: function (ractive, object, keypath, prefixer) { 
    // Set up color thief for this piece of data because it's an image 
    var colorThief = new ColorThief(); 

    return { 
     teardown: function(){ 
     colorThief.destroy(); 
     }, 
     get: function(){ 
     // Return the replacement data 
     return colorThief.getColor(object); 
     }, 
     set: function(property, value){ 
     // We're not setting to color thief, leave empty 
     }, 
     reset: function(value){ 
     // Always replace the data when the data is changed 
     return false; 
     } 
    } 
    } 
}; 

var ractive = new Ractive({ 
    target: '#container', 
    template: '#template', 
    adapt: [ 'CTImg' ], 
    data: { 
    dominant: null 
    }, 
    onrender: function(){ 
    // set image on data. adaptor will capture it. 
    this.set('dominant', this.find('#ctimage')) 
    } 
});