私は、ember-data なしで Emberjs を使用して実験してきました。既存の JSON (REST ではない) APIに接続しようとしています。
サムネイル画像のグリッドを読み込んで、クリックして選択した画像の高解像度プレビューを表示しようとしています。
API には、ファイルのコレクションを取得して個々のファイルの詳細を取得するための個別の呼び出しがあります。明らかに、プレビュー用の高解像度画像の URL を取得するためだけに何百回も呼び出しを行うことは避けたいと考えています。したがって、私の App.File.find と App.File.findAll は異なる API 呼び出しを使用します。
IMS.api.calljQuery.ajaxpromise を返すシンプルなラッパーです。
問題:グリッドは正常に読み込まれます/#/files/が ( )、個々の画像をクリックすると、プレビューではプレビュー画像ではなくサムネイルが使用されます ( /#/files/11659315501)。ただし、ブラウザを更新すると、高解像度バージョンが表示されます。
いくつかのロギングを追加すると、最初のバージョンApp.File.findでは呼び出されないことがわかります。リフレッシュ時に一度呼び出されます。
私が試したこと：
高解像度の URL を取得するために別の呼び出しを行う計算プロパティを追加しました。
bigUrl: function(){
var id = this.get('content.id');
preview = App.File.find(id);
return preview.url;
}.property('id')
しかし、jQuery 呼び出しによって返された defer は、ビューがレンダリングされるまでにロードされていなかったため、bigUrl は未定義でした。だから私はそれをプロミスでラップしようとしましたが、Ember は計算されたプロパティがプロミスを返すことができないと不平を言いました。
エンバーに電話をかけるように促す方法を見つけるためにいたるところを見ましたが、役に立ちApp.File.findませんでした。
何か案は？
window.App = Ember.Application.create();
App.Router.map(function() {
this.resource('files',function(){
this.resource('file',{path:':file_id'});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function(){
this.transitionTo('files');
}
});
App.FilesRoute = Ember.Route.extend({
model: function() {
return App.File.findAll();
}
});
App.FileRoute = Ember.Route.extend({
model: function(args) {
return App.File.find(args.file_id);
}
});
App.File = Ember.Object.extend({});
App.File.reopenClass({
find: function(id){
return IMS.api.call("Files.GetAssetDetails",{"assetId":id}).then(
function(response) {
file = response.outParams;
return App.File.create({'id':file.id,'filename':file.filename,"url":file.panoramicUrl});
}
);
},
findAll: function() {
return IMS.api.call("Files.GetAssetsForParent",{"containerId":11659314773}).then(
function(response) {
var files = [];
response.outParams.forEach(function (file) {
files.push(App.File.create({'id':file.id,'filename':file.filename,"url":file.thumbUrl}));
});
return files;
}
);
},
});
[アップデート]
ビューは次のようになります。
応用：
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="twelve columns">
<h1>/pics/</h1>
<hr>
{{outlet}}
</div>
</div>
</script>
ファイル:
<script type="text/x-handlebars" data-template-name="files">
<div class="row">
<div class="six columns">
{{outlet}}
</div>
<div class="six columns" id='chooser'>
{{#each file in model}}
<div style='float:left'>
<div>
{{#linkTo file file}}
<img {{bindAttr src="file.url"}} style='width:100px;height:100px;'>
{{/linkTo}}
</div>
</div>
{{/each}}
</div>
</div>
</script>
ファイル
<script type="text/x-handlebars" data-template-name="file">
{{log id}}{{log url}}
<div>
<img {{bindAttr src="url"}} style='width:400px;height:400px;'>
</div>
<div>
{{id}}
</div>
</script>