Question

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

{{>audioPlayer audio=audio}}

包含的模板用于后续页面，因此audioPlayer不会被重新呈现，只有页面的内容发生变化（如页面/ 1，页面/ 2，页面/ 3，每页都有这个元素）同一个地方）。我现在要做的是加载正确的文件，匹配传递的变量的id。我用咆哮来做这件事，我需要订阅才能获得与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变量的变化没有反应。变量本身确实发生了变化，至少当我将这个变量放在帮助器中并显示它时就会发生变化。

有什么想法吗？

Answer 1

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

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

正如您所知，该代码块是订阅，但它只返回1个结果＆amp;当某人正在听他们的曲调时，网址可能不会发生变化。这是一个悲伤，令人遗憾的订阅。如果你有一个只从服务器抓取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;
  }
});

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

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

1 个答案: