ajax 呼び出しからの応答を返す新しい Ember.Model を作成しています。
これは、コントローラーにあるajaxメソッドです
createImageResource: function() {
var self = this,
fd = new FormData(),
newResource = {},
resources = self.get('controllers.resources.model'),
fileName = this.get('resource_image').name,
fileSize = this.get('resource_image').size,
fileType = this.get('resource_image').type;
fd.append('resource[resource_type]', 'image');
fd.append('resource[resource_name]', this.get('resource_name'));
fd.append('resource[source_id]', this.get('source_id'));
fd.append('resource_image[resource_image]', this.get('resource_image'));
fd.append('resource[resource_file_name]', fileName);
fd.append('resource[resource_file_type]', fileType);
fd.append('resource[resource_file_size]', fileSize);
this.set('isProcessingResource', true);
$.ajax({
url: '/resources',
method: 'POST',
dataType: 'json',
processData: false,
contentType: false,
data: fd,
}).then(function(newResourceData) {
newResource = Msmapp.Resource.create(newResourceData.resource);
resources.pushObject(newResource);
self.set('isProcessingResource', false);
self.transitionToRoute('resource', newResource);
});
},
これにより、リソース コントローラーが使用するオブジェクトの配列に新しいリソースが追加されます。本来あるべきようにそれをDOMに入れます。私が抱えている問題は、各オブジェクトが個々のリソースへのリンクであることです。ページの読み込み時に存在していたすべてのオブジェクトは正常に機能します。リストに追加されたオブジェクトには正しい URL とすべてが含まれていますが、ナビゲートしようとしても何もしません。
.then() で他に何かする必要があるかどうかわかりませんか?
これがテンプレートです
<section class="column_list">
<ul>
{{#each resource in controller }}
<li class="item">
{{#if resource.isLoading }}
{{spinner}}
{{else}}
{{#linkTo 'resource' resource }}
<img {{bindAttr src='resource.listAvatar'}} />
<div class='title'>{{ resource.resource_name }}</div>
{{/linkTo}}
{{/if}}
</li>
{{/each}}
</ul>
</section>