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，所以我知道数据键路径/引用是正常的。然而，我的问题是通过适配器从Color Thief获得颜色 - 我得到的错误是未捕获的＆＃34; TypeError：无法设置属性＆＃39; CTImg＆＃39;未定义＆＃34;。

我已经通过SO和Ractive Github网站查看了我是否能弄清楚出了什么问题，但是我的头开始旋转了！

任何人都可以帮助我至少通过适配器从Color Thief获得颜色吗？

Answer 1

所以"SYNCPOINT"和adapt是两个不同的配置对象。 adaptors是适配器定义的注册表，adaptors告诉组件/实例使用哪些适配器。没有全局adapt属性。

对于适配器的全局注册，您需要adapt。

Ractive.adaptors

下一个问题实际上是你如何使用适配器。适配器要求您将非POJO数据放入实例中。对数据运行Ractive.adaptors.CTImg = {...}并确定是否需要调整数据，如果需要，则进行设置。然后，它是通常的适配器设置。 filter将值返回给Ractive，get将值设置为自定义对象，等等。

这是一个更新的例子：

set

＆＃34; TypeError：无法设置属性＆＃39; VibrantImg＆＃39;在RactiveJS适配器中

1 个答案: