Question

与模板实例进行交互的最佳方式是什么？我有一个html5视频库，我想在滚动到视图时播放，当它们在浏览器窗口之外时停止播放。

以下代码适用于一个视频，但当我有多个视频时，代码会同时更改所有视频，is_playing设置为多个视频的完全相同的值。

这些是可能的相关讨论，但我无法弄清楚： Let helpers access template instance #1529，Need way to reactively depend on data context / template arguments

Template.showcaseVideo.rendered = function () {

    var video_id = this.data._id;
    var video = document.getElementById(video_id);
    var is_playing = false;

    $(window).on("scroll", '', function (event) {

        if(isScrolledIntoView($('#'+video_id)) && !is_playing) {
            video.play();
            is_playing = true;
            console.log( "playing " + video_id);
        } else if (is_playing) {
            video.pause();
            is_playing = false;
            console.log( "stopped " + video_id);
        }
    });
}

Answer 1

尝试将is_playing变量分配给模板实例：

Template.showcaseVideo.rendered = function () {
    var self = this;
    self.is_playing = false;

    $(window).on("scroll", '', function (event) {
        var video_id   = self.data._id;
        var video      = document.getElementById(video_id);
        var is_playing = self.is_playing;
        if(isScrolledIntoView($('#'+video_id)) && !is_playing) {
            video.play();
            is_playing = true;
            console.log( "playing " + video_id);
        } else if (is_playing) {
            video.pause();
            is_playing = false;
            console.log( "stopped " + video_id);
        }
    });
}

Template.templatename.rendered和模板实例

1 个答案: