javascript - meteor 和色贼不会合作

Question

我一直在使用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>

请注意，我不需要指定图像的方向，因为 meteor 会自动查找项目内/public 文件夹内的所有图像。

在 html 模板中，在之前显示的 html 片段之后，我一直以这种方式使用颜色小偷:

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

无论我做什么，专辑列表都无法正常显示，color thief 似乎不起作用，这可能是我认为是否有关于 Meteor 的事情我不知道。另请注意，Color-Thief.j 和 Quantize.js 包含在客户端文件夹中。

谢谢大家

编辑:由于meteor在单独的文件中处理逻辑和模板，我以这种方式创建一个新的模板助手:

    Template.albumItem.helpers({

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

});

模板albumItem内部使用颜色的方式如下:

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

仍然不起作用，但我确信这是朝着正确方向迈出的一步，也许现在我们需要弄清楚如何知道该模板在图像加载后启动...

Answer 1

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