Meteor：模板变量更改时重新运行代码

Question

我创建了一个模板，一个音频播放器元素。音频文件的 id 通过模板变量传递给元素。像这样的：

{{>audioPlayer audio=audio}}

包含模板用于后续页面，因此 audioPlayer 不会重新呈现，只有页面内容会发生变化（例如 page/1、page/2、page/3 在每个页面上都具有相同的元素地方）。 我现在要做的是加载正确的文件，匹配传递的变量的 id。我用howler来做这个，我需要订阅才能获取与id相关的文件的url。

Template.audioPlayer.created = function () {

    var audioId = this.data.audio;
    var subscription = this.subscribe('audio', audioId); //this is where the variable is

    if (subscription.ready()) {
        var audioUrl = Audio.findOne(audioId).url;
        var audio = new Howl({
            urls: [audioUrl]
        })
    }
}

因为这是只运行一次的创建函数，但我希望每次进入新页面时都运行它，以确保我有正确的音频文件与正确的页面匹配。

我尝试将这部分包装在 Tracker.autorun 中，但这似乎并不能解决问题。它不会对 this.data.audio-variable 的更改做出反应。变量本身确实发生了变化，至少当我将此变量放入帮助程序并显示它时会发生变化。

有什么想法吗？

Answer 1

现在，audioId 没有反应。您需要将其更改为 Session var，或者（甚至更好）url 中的查询参数。我假设你知道如何做到这一点。

好的，现在我们有了一个反应变量，每次该变量发生变化时，我们都需要重新运行一段代码。让我们使用自动运行。

正如您所拥有的那样，该代码块是一个订阅，但它只返回 1 个结果，并且当有人在听他们的音乐时，该 url 可能不会改变。这是一个悲伤的，抱歉的订阅。如果您有一种仅从服务器获取 url 的方法，那会更好。

Tracker.autorun(function() {
  var audioId = Session.get('audioId');
  Meteor.call('getAudioUrl', function(err,res) {
    if (err) throw err;
    var audio = new Howl({
      urls: [res]
    })
  })
});

//in the server folder
Meteor.methods({
  'getAudioUrl': function(audioId) {
    return Audio.findOne(audioId).url;
  }
});

轰隆隆。没有无用的潜艇和所有你可以动摇的反应。