•  24-09-2022
  •  | 
  •  

Pergunta

I'm working with Ben McMahen's example of intigrating cast.js with Meteor and I'm having some trouble figuring out excatly how it is suppose to work. His demo was built with Meteor, however the instructions in his blog and on github are a bit unclear to me. I'm trying to do a similar layout as his demo, but instead of rendering videos it will render photos. I'm hoping someone can help show me where I'm going wrong.

First, my HTML template is as follows:

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

My client code is:

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

My collection is: 

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

Edit:

The new changes on 0.5.1 work great fix most of the errors I had with cast.js, however I'm still having some trouble rendering the data into each template.

First off, so you know how my data is structured, when I run db.picture.findOne(); in mongoDB the data renders as: 

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

Right now I'm getting an error of Cannot set property 'rendered' of undefined from the Template.cast.rendered function. I'm not sure if I'm getting this error because I'm calling my data wrong or if there something else going on that I'm unaware of. Any thoughts on how what might be going on?

Thanks in advance!

Foi útil?

Solução

thanks for trying my little library. I haven't touched Meteor in a long time (nor this library) so hopefully I can still be of some help in getting this working.

First off, you need to include the app.js file (which I've renamed to cast.js in the repo) in the Meteor client-side code and not the server-side code. This might explain why you are getting the window not defined error. As you can see in the end of the code you posted, cast.js is attempting to attach its name to the global window object... thus making it a global variable. If window doesn't exist (which it doesn't on the server) then you'll get this error.

Second, if you are using the standalone build cast.js you do not need to use the require('cast') statement. The cast constructor is already defined as cast.

Other than that, things look pretty good. I've updated the cast.js repo which some Meteor specific instructions. I would also recommend using the updated cast.js file in the dist folder.

EDIT:

Okay, your new error is a result of how Meteor loads its scripts. For starters, you need to ensure that your script only loads on the client and that it loads after the dom has loaded. This explains your current error: document.body is undefined because the dom hasn't loaded yet! And this is because Meteor loads all of its scripts inside of the <head>... whereas, in most web apps that I write, I load the script at the end of the <body> tag.

For a fix: Put the cast.js file in the public folder so that it isn't auto-bundled by Meteor. Then load your script once the DOM has loaded:

if (Meteor.isClient) {

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

}

You might run into some issues doing this, in which your template runs before cast is loaded... but it might be fine. I can also do a small fix in the lib itself so that it doesn't check for translate3d support until the dom has loaded.

EDIT: Version 0.5.1 of Cast.js will now properly load simply by including it in Meteor's client-code. Also note that the API has changed fairly significantly (for the better, imo).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top