我有一个消息列表。单击特定邮件时,会加载详细信息。这部分工作正常。
我想在加载点击的邮件时异步加载一些其他相关数据。为此,我在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
按预期工作,即在数据可用时加载?
答案 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
});