私はこの素敵な Ember.js ミックスインを使用しています: https://github.com/Wildhoney/EmberDropletを使用して、ドラッグ アンド ドロップを使用して画像をアップロードしましたが、見事に機能しています。
唯一の問題は、アップロードされた画像をビューに追加する方法がわからないことです。モデルは Rails API で適切に更新されていますが、実際にページ全体を更新するまでは、Ember でモデルを更新する方法がわかりません。
ここに私のコードのいくつかのスニペットがあります:
router.js.coffee
App.Router.map ->
@resource('site', { path: '/' }, ->
@resource('media')
)
routes.js.coffee
App.MediaRoute = Ember.Route.extend
model: (params)->
return App.Media.find()
media.handlebars
<div class="row">
<div id="media-container" class="large-12">
<div class="row">
{{#each media in model}}
<div class="large-4 columns">
<a class="th" {{bind-attr href='media.url'}}>
<img {{bind-attr src='media.thumb'}}>
</a>
</div>
{{else}}
<div class="large-12">
<p>Sorry, no images to display.</p>
</div>
{{/each}}
</div>
</div><!-- /#media-container -->
</div><!-- /.row -->
<div class="row">
<div id="media-upload" class="large-12">
<div class="buttons">
<button class="btn" {{action "uploadAllFiles"}}>Upload All</button>
<button class="btn" {{action "clearAllFiles"}}>Clear</button>
</div>
{{#if uploadStatus.uploading}}
<h3 class="uploading-percentage">Uploaded Percentage: {{uploadStatus.percentComplete}}%</h3>
{{/if}}
{{#view view.DragDrop}}
{{#if uploadStatus.error}}
<div class="error">An error occurred during the upload process. Please try again later.</div>
{{/if}}
{{#each controller.validFiles}}
<div {{bind-attr class="className:image"}}>
{{name}}
<a class="remove" {{action "deleteFile" this}}>Discard.</a>
{{view view.ImagePreview imageBinding="this"}}
</div>
{{/each}}
{{view view.MultipleInput}}
{{/view}}
</div><!-- /#media-upload -->
</div><!-- /.row -->
media.js
App.MediaController = Ember.ArrayController.extend(DropletController, {
dropletUrl: 'http://localhost:3000/images',
uploadedSomeFiles: function uploadedSomeFiles() {
var files = this.get('uploadedFiles');
files.forEach(function(file) {
// This gets fired every-time a file has uploaded successfully
console.log(file + ' was uploaded!');
});
}.observes('files.length', 'files.@each.uploaded')
});
そうそう、それが役立つ場合はモデル (私は ember-model を使用しています):
App.Site = Ember.Model.extend({
title: attr(String),
about_text: attr(String),
is_custom_domain: attr(Boolean),
subdomain: attr(String),
url: attr(String),
copyright: attr(String),
site_desc: attr(String),
meta_keywords: attr(String),
footer_code: attr(String),
header_code: attr(String),
hide_site: attr(Boolean),
user: belongsTo('App.User', {key: 'user_id'}),
page: hasMany('App.Page', {key: 'pages', embedded: true}),
media: hasMany('App.Media', {key: 'images', embedded: true})
});
App.Media = Ember.Model.extend({
file_size: attr(Number),
width: attr(Number),
height: attr(Number),
url: attr(String),
identifier: attr(String),
current_path: attr(String),
content_type: attr(String),
thumb: attr(String),
medium: attr(String),
small: attr(String),
tall_banner: attr(String),
short_banner: attr(String),
site: belongsTo('App.Site', {key: 'site_id'})
});
jQuery だけを使用すると、新しい画像をページに追加するのは非常に簡単ですが、何らかの理由で Ember を使用すると非常に複雑になります。（わかりました、公平を期すために、他のことは Ember を使用するとはるかに簡単になります。）
アップデート：
あなたはそれを知らないでしょうか、私は何日も（はい、何日も）問題に苦労し、それをstackoverflowに投稿してから数時間、答えに少し近づきました。
emberdroplet は標準の XMLHttpRequest を使用しているため、request.onload を使用して、Rails API から返された request.responseText にアクセスできることがわかりました。
わかりましたので、ここに私のコードがあります：
request.onload = function() {
var media = App.Media.find();
request.responseText.forEach(function(file, media) {
media.pushObject(file);
console.log(file.id);
});
}
しかし、私はエラーを返しています:
この JSON が返されます。
{"id":93,"file_size":438162.0,"width":null,"height":null,"url":"/uploads/image/image/93/blevins_header_2013_v6.jpg", etc.
これがビューに追加されます：
<a class="th" data-bindattr-276="276">
<img data-bindattr-278="278">
</a>
つまり、Ember-model は未加工の JSON をどう処理すればよいかわからないので、最初に何かを行う必要があります。
何か案は？