javascript - 将 JWplayer 嵌入代码从数据库集合加载到meteor.js 中的页面模板中

Question

您好，我是 meteor 和一般编程的新手。

我试图让我的页面从数据库集合中动态加载 JWPlayer 视频嵌入代码。由于我为此应用程序/网站制作了 100 多个视频，因此我认为这是最简单的方法。 如果有更好的方法，请告诉我!!

问题似乎是数据库中的 javascript 嵌入代码在页面之前加载，因此没有被执行。这是我的代码。

模板代码:

<template name="videos">
        {{{viddiv}}}
   <script type='text/javascript'>
        {{{vidscrip}}}
  </script>
</template>

来自数据库集合的代码(它已被正确转义，所以有点疯狂):

vids.insert ({
    _id: "1",
    viddiv: '<div id=\'player64I7ulrK\'><\/div>',
    vidscrip: "jwplayer(\'player64I7ulrK\').setup({\r\n
               playlist: \'\/\/jwpsrv.com\/feed\/64I7ulrK.rss\',\r\n        
               width: \'100%\',\r\n        
               aspectratio: \'16:9\'\r\n    
               });"
});

当我启动应用程序并查看页面时，我可以看到一切都在那里并且看起来不错。但脚本没有执行。

<div id="player64I7ulrK"></div>
<script type="text/javascript">
   jwplayer('player64I7ulrK').setup({
      playlist: '//jwpsrv.com/feed/64I7ulrK.rss',
      width: '100%',
      aspectratio: '16:9'
   });
</script>

这是我用来渲染 View 的路线(正确的术语？)。

Router.map(function() {
   this.route('videos', {
    path: '/videos/:_id',
    data: function() {return vids.findOne(this.params._id); }
   });

});

我使用了 Template.videos.rendered 并添加了一个单独的 js 文件，其中包含嵌入代码。这确实有效，但是我不确定如何将代码动态加载到这个 js 文件中以形成数据库集合。这意味着我必须对每个嵌入进行硬编码 =(

如果您想查看的话，这是我的 git 存储库的链接! https://github.com/jacksonvoice/VCU.git

任何帮助都会很棒!我有点陷入这个困境，需要一些帮助!

提前谢谢您!

Answer 1

将 js 代码作为转义字符串嵌入到数据库中是坏主意，因为它不容易管理、更改和使用。相反，我会稍微重构一下你的代码:

vids.insert({
   url:'//jwpsrv.com/feed/64I7ulrK.rss',
   width:'100%',
   aspectratio:'16:9',
   divSelector:'64I7ulrK'
})

视频.html:

<template name="videos">
  <div class="{{divSelector}}"></div>
</template>

Videos.js:

   Template.videos.rendered = function () {
      jwplayer(this.data.divSelector).setup({
         playlist    : this.data.url,
         width       : this.data.width,
         aspectratio : this.data.aspectratio
      });
   };