javascript - meteor 和彩色小偷将一起工作

我一直在使用流星创建一个显示唱片列表的小项目。现在，像这样将音乐专辑数据存储在模板帮助器中：

    var albumsData = [
      {
        artist:'artist name',
        title: 'title album',
        url: 'http://...',
        review: 'Lore ipsum',
        sauce:'lostyears.png'
      }, ...
];
Template.albumsList.helpers({
  albums: albumsData
});

模板相关的部分是：

 <div class="album-info">
    <div class="unit size3of5">
        <h6>{{artist}}</h6>
        <h2 id="primaryColor">{{title}}</h2>
        <a href="{{url}}" class="secondaryColor">Listen on...</a>
        <p>{{review}}</p>
    </div>
    <div class="unit size2of5">
       <div class="album-Image">
         <img id="myImg" src="{{sauce}}">
       </div>
    </div>
</div>

请注意，由于流星自动找到项目内/ public文件夹内的所有图像，因此我不需要指定图像的方向。

在显示htlm片段之后的html模板中，在我以这种方式使用彩色小偷之前：

<script>
  $(window).ready(function(){
    var colorThief = new ColorThief();
    var color = colorThief.getColor('{{sauce}}');
    document.getElementById("primaryColor").style.color = "rgb(" + color + ")";
   });
</script>

专辑列表正确显示，无论我做什么，彩色小偷似乎都不起作用，这可能让我认为如果Meteor有一些我不知道的地方。还需要注意客户端文件夹中包含Color-Thief.j和Quantize.js。

感谢大伙们

编辑：由于流星处理逻辑和模板在单独的文件中，我以这种方式创建一个新的模板帮助器：

    Template.albumItem.helpers({

  color: function() {
    var colorThief = new ColorThief();
    return colorThief.getColor(this.sauce);
  }

});

通过以下方式在模板albumItem中使用颜色：

<h2 style="color:{{ color }}">{{title}}</h2>

仍然无法正常工作，但是我敢肯定这是朝着正确的方向发展的，也许现在我们需要弄清楚如何知道在加载图像后此模板开始了...

最佳答案

尝试将var color = colorThief.getColor('{{sauce}}');替换为var color = colorThief.getColor($('#myImg'));