Ember - 嵌套视图中的异步数据

时间:2014-09-05 14:35:15

标签: javascript jquery angularjs ember.js

我有一个消息列表。单击特定邮件时,会加载详细信息。这部分工作正常。

我想在加载点击的邮件时异步加载一些其他相关数据。为此,我在messageView内嵌套了一个视图。但是我无法加载和访问数据。

这是我的模板

<script type="text/x-handlebars" id="message">

   {{#view "messageThread" contentBinding="this"}}

       {{#each message in view.getConversation}}

         <div>Message body</div>
         {{message.body}}

       {{/each}}


     </div>
   {{/view}}

</script>

以下是上面模板中使用的messageThreadView

App.MessageThreadView = Ember.View.extend({


     getConversation: function(){

       var msg = this.get('context').model;

       var sender_id = msg.sender.id;
       var recipient_id = msg.recipient.id;

       downloadConversation(recipient_id, sender_id);

       return this.get('current_conversation');

     }.property('current_conversation'),

});

这是在上面的视图中调用的异步数据加载函数

function downloadConversation(recipient_id, sender_id){

   $.getJSON(<a url>)
     .then(function(data){

       App.set('current_conversation', data['objects']);
     });

 }

如何使view.getConversation按预期工作,即在数据可用时加载?

1 个答案:

答案 0 :(得分:1)

这是异步属性的最简单模式,尤其是当它们是一个集合时。您基本上返回一个集合引用(在本例中为convo),然后从引用中异步填充该集合。

App.MessageThreadView = Ember.View.extend({
     getConversation: function(){

       var msg = this.get('context').model,
           sender_id = msg.sender.id,
           recipient_id = msg.recipient.id,
           convo = [];

       $.getJSON(<a url>).then(function(data){
         data.forEach(function(item){
           convo.pushObject(item);
         });
       });

       return convo;
     }.property(), // this should be watching sender and receipient

});