Question

我正在使用Ben McMahen's将cast.js与Meteor融合的例子，我很难搞清楚它是如何工作的。他的演示是用Meteor构建的，但是他的博客和github上的说明对我来说有点不清楚。我正在尝试做与他的演示相似的布局，但不是渲染视频，而是渲染照片。我希望有人可以帮我告诉我哪里出错了。

首先，我的HTML模板如下：

{{#constant}}
  <div id="cast"></div>
{{/constant}}

我的客户代码是：

   function renderTemplate(obj){
    return '<img class="img-rounded" src="' + obj.photo + '>';
}

Template.cast.rendered = function(){

    var el = document.getElementById('#cast');

    var mycast = cast(el);

    mycast.draw();

    this.handle = Meteor.autorun(function(){
        var photo = picture.find().fetch();
        mycast
            .data(photo, '_id')
            .dynamic(150, 150, 10, 10);
    });
}

我的收藏是：

Photos = new Meteor.Collection('picture');

修改

0.5.1工作的新变化很好地解决了我对cast.js的大多数错误，但是我仍然在将数据渲染到每个模板时遇到一些麻烦。

首先，你知道我的数据是如何构建的，当我在mongoDB中运行db.picture.findOne();时，数据呈现为：

   {
        "id" : "999999999999999",
        "from" : {
            "name" : "Seano314",
            "id" : "99999999"
        },
        "picture" : "https://photoSmall.jpg",
        "source" : "https://photoLarge.jpg",
        "height" : 540,
        "width" : 720
}

现在我从Cannot set property 'rendered' of undefined函数收到Template.cast.rendered错误。我不确定我是否收到此错误，因为我正在调用我的数据错误，或者是否有其他事情我不知道。有关可能发生的事情的任何想法？

提前致谢！

Answer 1

感谢您尝试我的小图书馆。我很久没有接触过Meteor（也没有触及过这个库），所以希望我能在这方面有所帮助。

首先，您需要在Meteor客户端代码中包含app.js文件（我在repo中重命名为cast.js）并且不服务器端代码。这可能解释了为什么您收到window not defined错误。正如您在发布的代码末尾所看到的那样，cast.js正在尝试将其名称附加到全局window对象...从而使其成为全局变量。如果窗口不存在（它不在服务器上），那么您将收到此错误。

其次，如果您使用的是独立版本cast.js，那么不需要使用require('cast')语句。强制转换构造函数已定义为cast。

除此之外，事情看起来还不错。我更新了一些Meteor特定说明的cast.js repo。我还建议使用cast.js文件夹中更新的dist文件。

修改

好的，你的新错误是Meteor加载脚本的结果。对于初学者，您需要确保您的脚本仅在客户端上加载，并且在加载dom之后加载。这解释了您当前的错误：document.body未定义，因为dom尚未加载！这是因为Meteor在<head>内部加载了所有脚本...而在我编写的大多数Web应用程序中，我在<body>标记的末尾加载脚本。

要修复：将cast.js文件放在public文件夹中，以便Meteor不会自动捆绑它。然后在加载DOM后加载脚本：

if (Meteor.isClient) { Meteor.startup(function() { $('head').append('<script src="/cast.js"></script>'); }); }

您可能会遇到一些问题，在加载cast之前模板已运行...但它可能没问题。我也可以在lib本身做一个小修复，这样在dom加载之前它不会检查translate3d支持。

修改 Cast.js的0.5.1版本现在可以通过将其包含在Meteor的客户端代码中来正确加载。另请注意，API发生了相当大的变化（为了更好，imo）。

将Cast.js与Meteor一起使用

1 个答案: