javascript - Updating an Emberjs view as objects are updated -

i'm using nice ember.js mixin: https://github.com/wildhoney/emberdroplet upload images using drag-and-drop , it's working brilliantly.

the problem is, don't know how add images view after have been uploaded. model getting updated in rails api, but, short of refreshing whole page, don't know how update model in ember.

here's snippets of code:

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 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 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) {                 // gets fired every-time file has uploaded                 console.log(file + ' uploaded!');         });     }.observes('files.length', 'files.@each.uploaded')  }); 

oh yes, , models, if helps (i'm using 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'}) }); 

with jquery alone dead simple append new image page, reason ember makes complicated. (ok, in fairness other things easier ember.)

update:

wouldn't know it, struggle problem days (yes, days) , hours after post stackoverflow, little closer answer.

i found out since emberdroplet using standard xmlhttprequest, can use request.onload , have access request.responsetext sent rails api.

ok, here's code now:

request.onload = function() {   var media = app.media.find();   request.responsetext.foreach(function(file, media) {     media.pushobject(file);     console.log(file.id);   }); } 

but, i'm getting error:

i json:

{"id":93,"file_size":438162.0,"width":null,"height":null,"url":"/uploads/image/image/93/blevins_header_2013_v6.jpg", etc. 

and gets added view:

<a class="th" data-bindattr-276="276">   <img data-bindattr-278="278"> </a> 

so, figure, ember-model doesn't know raw json, should first, right?

any ideas?

you need fetch new media model after it's been created on server-side. way you.

for example, can call this.store.find('media') fetching models every time.

or set mediaroute.model return this.store.filter('media') , add server-side route creating media model. on client need manually create new model every uploaded file , save them (ember-data automagicly inserts them filtered arrays).

or can handle ajax work yourself. if want dead simple jquery way, bind template {{#each file in files}}, iterates on uploaded files (use file.url or smth, don't sure). load uploaded files use $.getjson method , add every file response mediacontroller.files property (i'm not recommending way, it's possible simple).