Question

你好，我是流星和编程的新手。

我正在尝试让我的页面从数据库集合中动态加载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>

这是我用来渲染视图的路线（正确的术语？）。

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

将db中的js代码嵌入到转义字符串坏主意，因为它不易管理，更改，使用。相反，我会稍微重构一下你的代码：

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

Videos.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
      });
   };

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

1 个答案: