使用模型中的Ajax数据填充Ember JS车把模板？

Question

场景.

我正在收集一些ajax数据,并希望用它填充一个列表.数据源来自LastFM的API - 我知道我收到了数据 - 请看图片:

这是我正在使用的代码 - 任何有关最佳实践的建议也会受到赞赏 - 我很享受Ember,但说实话,我仍在为它的工作方式付出代价:

余烬模型

App.IndexRoute = Ember.Route.extend({
  model: function () {

      var albumArtwork = [];

      function convertString (data) {
          return encodeURIComponent(data).replace(/%20/g, "+");
      }

      $.each(topAlbums, function (i, el) {
          var request = 'http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=[REMOVED API KEY!]&artist=' + convertString(topAlbums[i].artist) + '&album=' + convertString(topAlbums[i].album) + '&format=json';

          $.ajax({
              'url': request
          }).done(function (d) {
              albumArtwork.push(d.album.image[1]['#text']);
          });
      });

      albumArtwork = _.toArray(albumArtwork)

      return albumArtwork;
  }
  });

余烬车把模板

<script type="text/x-handlebars" id="index">
    <div class="album-artwork-list-wrapper">
        <ul class="album-artwork-list">
            {{#each item in model}}
                <li class="album-artwork-item">
                    <img src="{{item}}">
                </li>
            {{/each}}
        </ul>
    </dv>
</script>

最后的想法

以下是我认为正在发生的事情:在数据从API调用返回之前呈现了把手模板.如何用Ember JS克服这个问题,我不确定 - 我在stackoverflow上看到了一个解决方案的例子并试图使用它们但无济于事!

非常感谢您的帮助!

Answer 1

你必须创建promises,以便异步调用可以同步.Ember提供RSVP.js来做同样的事情.RSVP.all符合您的目的.所以..你的代码可以像这样改变.

    App.IndexRoute = Ember.Route.extend({
      model: function () {

          var albumArtwork = [], promises =[];

          function convertString (data) {
              return encodeURIComponent(data).replace(/%20/g, "+");
          }

          $.each(topAlbums, function (i, el) {
              var request = 'http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=[REMOVED API KEY!]&artist=' + convertString(topAlbums[i].artist) + '&album=' + convertString(topAlbums[i].album) + '&format=json';

              promises.push(ajaxPromise(url));

      }
      return RSVP.all(promises).then(function(images) {
             // images contains an array of results for the given promises
             albumArtwork = images.filterBy('album');
             return albumArtwork;
          });
      });

var ajaxPromise = function(url, options){
  return Ember.RSVP.Promise(function(resolve, reject) {

    options.success = function(data){
      resolve(data);
    };

    options.error = function(jqXHR, status, error){
      reject(arguments);
    };

    Ember.$.ajax(url, options);
  });
};