1. Home
  2. Forum
  3. Ember JS
  4. any example DataManager code for Ember

any example DataManager code for Ember

Hey,
I am trying to use Ember JS with Essential Javascript. I would like to know if there is any example code building or integrating with DataManagers that interoperate with EmberData.

any pointers would be appreciated.

Mark

5 Replies
SK Shanmugaraja K Syncfusion Team December 4, 2017 01:10 PM UTC

Hi Mark, 
 
Thanks for using Syncfusion products, 
 
We would like to let you know that we have achieved your requirement by using Ember Data. For that we have created the model (“albums.js”) and pushed the records to ember store. And we can retrieve the ember data from the store and bind it to the ejDropdownList. You can refer the below getting started to prepare the sample for Ember JS. 
 
 
Please refer the below files for accessing Ember Data source.  
 
[models/albums.js] 
 
 
export default DS.Model.extend({ 
       title: DS.attr(), 
       artist: DS.attr(), 
       songCount: DS.attr() 
}); 
 
 
[routes/application.js] 
 
 
model() { 
       this.store.push({ 
              data: [{ 
                     id: 1, 
                     type: 'albums', 
                     attributes: { 
                           title: 'Fewer Moving Parts', 
                           artist: 'David Bazan', 
                           songCount: 10 
                     }, 
                     relationships: {} 
              }, { 
                     id: 2, 
                     type: 'albums', 
                     attributes: { 
                           title: 'Calgary b/w I Can\'t Make You Love Me/Nick Of Time', 
                           artist: 'Bon Iver', 
                           songCount: 2 
                     }, 
                     relationships: {} 
              }] 
       }); 
} 
 
 
[routes/index.js] 
 
 
model() { 
       var dataColl = []; 
       this.store.findAll('albums').then(function(album) { 
              album.map(function(x) {  
                     dataColl.push(x.toJSON());  
              }); 
       }); 
       return { 
              data : dataColl, 
              fieldsvalues: { dataSource: dataColl, text: 'artist', value: 'artist' }, 
              value: 'Bon Iver', 
              width: "100%" 
       } 
} 
 
 
[templates/index.hbs] 
 
 
{{ej-dropdownlist id="dropdownlist" e-dataSource=model.data e-fields=model.fieldsvalues e-width=model.width e-value=model.value}} 
 
 
Please check the above details, and check whether this fulfilling your requirement. 
 
Regards, 
Shanmugaraja K 


ML Mark Lummus December 4, 2017 01:27 PM UTC

Shanmugaraj,

The read operation looks really straightforward.
How about create, delete and update operations?
How would you enhance this sample to support updates, creates and deletes, as in you might expect to do in an ejGrid instead?

thanks,
Mark



SK Shanmugaraja K Syncfusion Team December 8, 2017 12:31 PM UTC

Hi Mark,  
  
We have analyzed your query, based on your requirement we have prepared a sample, which can be downloaded from the link below,  
  
  
In the above given sample we have rendered Grid using WebAPIAdaptor and Ember data.   
  
Likewise, we can perform CRUD operations using DataManager and its extended adaptor. If you are facing any complexities in implementing this, please get back to us with the further details.  
 
Regards, 
Shanmugaraja K 


ML Mark Lummus December 8, 2017 01:24 PM UTC

It would appear that I have multiple requests that now overlap, and you are offering the same sample code for these multiple requests.

As I stated in my support incident, I'm not sure that your sample code will do the trick in my situation. I am using a Google Firebase adaptor to connect my client app to my server data (API is Google Firebase). What I need is code that works with models and the Ember Data store from within a Syncfusion control, using either events, a datamanager, and/or a custom ej adaptor. Ember Data and the Firebase Adaptor that I am currently using are managing the interface between my client and my server. Your examples all seem to want to manage that client/server data interface as well, which is unfortunate. 

What I need is a way to get your controls to talk to Ember Data. The current way that I am accomplishing this is to use the various change/edit/save events raised by individual components. The events are inconsistent across components, so the code to talk to Ember Data is different (yet mostly duplicated) in every case.

thanks,
Mark

SK Shanmugaraja K Syncfusion Team December 12, 2017 11:28 AM UTC

Hi Mark,  
 
We have analyzed your query. We have modified the sample based on your requirement, which could be downloaded from the link below,  
 
 
The update and add has a major difference that the e-addedrow will be available only during inserting action. So, you can use your code to add and update or perform any other operations inside the e-actionBegin event of Grid. Please refer the code example below,  
 
[application.hbs]  
  
{{ej-grid id="Grid" e-dataSource=model.data e-columns=model.cols e-allowPaging=true e-actionBegin=model.actionBegin e-editSettings=model.edit e-toolbarSettings=model.toolbar }}  
  
[application.js]  
 
actionBegin: function(args){  
                if(args.requestType == "save" && !this.element.find(".e-addedrow").length){  
                    //Update on Ember data  
                }  
                else if(args.requestType == "save" && this.element.find(".e-addedrow").length){  
                    //Insert on Ember data                  
                }  
                else if(args.requestType == "delete"){  
                    //Delete on Ember data  
                }  
            },  
  
 
Please get back to us if you need further details.  
 
Regards, 
Shanmugaraja K 


Loader.
Up arrow icon