0

Ember js ヘルパーへの ajax 呼び出しからの応答を返そうとしています。Helper でPromiseを使用したAsynchoronous呼び出しは を返します。[object Object]

console.log(data.thumbnail_url);動作していますが、コールバック<img...>は ( ) 応答を返しません。ここにJsFiddleがあります。

App.IndexRoute = Ember.Route.extend({
  model: function() {
   // for simply showing the problem, I've put the instagram id
   // Actually I will parse the id from the post body
   return ['fA9uwTtkSN'];
  }
});

Ember.Handlebars.registerBoundHelper("format-inst", function(input){
 // Add this part
 if (typeof input == 'undefined'){return;}

 function foo (URL) {
   return $.ajax({
       url: URL,
       dataType: "jsonp"
  });
 }
     var URL = 'http://api.instagram.com/oembed?url=http://instagr.am/p/'+input;
     var r = foo(URL).done(function (data){
                console.log(data.thumbnail_url);
                return '<img src="'+data.thumbnail_url+'">';                        
     });
     return new Ember.Handlebars.SafeString(r);
 });

ハンドルバー テンプレートは次のとおりです。

<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>

 {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
 <ul>
 {{#each post in model}}
  <li>{{format-inst post}}</li>
 {{/each}}
 </ul>
</script>
4

1 に答える 1

0

ヘルパーからの約束を返すことはできないと思います。たとえば、モデル関数の後など、すべての ajax をルートに配置できると思います。

setupController: function(controller, model){
var imgs = Ember.A([]);
controller.set('imgs', imgs );

model.forEach( function(imgId){
  var url = 'http://api.instagram.com/oembed?url=http://instagr.am/p/'+imgId;
  $.ajax({url: URL, dataType: "jsonp"}).done(function(data){
    imgs.pushObject(Ember.Handlebars.SafeString('<img src="'+data.thumbnail_url+'">') );
  });
});

}

次に、テンプレートで imgs にバインドするだけです。

{{#each image in imgs}}
  <li>{{image}}</li>
{{/each}}

ajax 呼び出しが完了すると、Ember 配列が更新され、テンプレートが自動的に更新されます。

于 2015-04-27T19:41:04.270 に答える