流星：如何遍历数组，这是异步方法的结果

Question

I have an asynchronous method which does a Facebook request for retrieving photos from the current logged in user.

I have a template where I loop over these results. But since the call to Facebook is asynchronous, it fails.

    <template name="mytemplate">
        {{#if photos}}
            {{> images pics=photos}}
        {{/if}}
    </template> 

    <template name="images">
        {{#with pics}}
            {{#each this}}
                {{images}}
            {{/each}}
        {{/with}}
    </template>

Here is my javascript:

      Template.mytemplate.helpers({
      photos: function () {
          return Template.instance().myAsyncValue.get();
      }
  });

  Template.mytemplate.created = function (){
      var self = this;
      self.myAsyncValue = new ReactiveVar("Waiting for response from server...");
      Meteor.call('getPhotos', function (err, data) {
          if (err)
              console.log(err);
          else 
              self.myAsyncValue.set(data.data);
      });
  }  

I already have a variable that is being watched, but the problem is that my template is already created and the result is not an array yet.

Can someone show me the best practices on how to use an asynchronous array result in a template. I want to create image tags in the template, not with jquery or javascript.

Thanks

Answer 1

If I understand this right, you're getting an error when the helpers are loaded because photos is not an array. Try this:

  Template.mytemplate.helpers({
  photos: function () {
      var val = Template.instance().myAsyncValue.get();
      return val.constructor === Array && val;
  }

As a side question for you, why are you using a ReactiveVar for an array? I have only found a use for using them on primitives, since reactivity doesn't do a deep scan, but maybe I'm missing out :)

Answer 2

Thanks for the quick response.

I've figured out after I wrote the question that my problem was not giving an actual array when the call was not yet made.

Regarding your side question. I have to use this ReactiveVar in order to keep track of the result, no? Because my variable hasn't got a value first. The template is already being setup. Then when I get a response, the value changed and my each loop reacts over the received array. That's how I understood this ReactiveVar anyway :)