Frustration with emberjs data transfering with its backend method as PHP - php

Question

I tried to do these three simple things but I can not in a world to figure out in almost ONE MONTH already, one word---FRUSTRATION! Now I doubt if emberjs is really worth it...
I want to:
Get data from database with just a .php file and data will be in json format
NOTE: I did this, in other SO question I asked, so I will not repeat.
Now, the problem, how can I save those data in a "store" without ember data?
Is there any available tutorial on how php can connect with emberjs? I tried to read about its REST adapter, but seem it needs some type of JSON API. Do I need to develop a JSON API if I use pure PHP code as back end?
If anything part is not clear, please reply in comment! Thanks a lot.

Answer 1

Chen, to be honest it is very easy to handle data without ember-data . I have used it few times, some of which were related to building quite large front-end systems. Main reason, ember-data was not that stable at the time and did not inspire much confidence. The other reason is that as you will see it is pretty straightforward.
All you have to do is create a class (it is also nice to have a singleton ember controller) that will get data from the server and post data to the server. The data format should be JSON, to make all process easier and clearer. You achieve this by using simple ajax calls,
function retrieveData(callback){
jQuery.ajax({
url: *yoururl*,
timeout: ajaxTimeOut,
success: function(data){
/* here you store this data somewhere
it could be helpful to have a callback that you call so that this class/controller
is not coupled with specific logic*/
if(callback!=null){
callback(data);
}
}
});
}
The function for retrieving data can be called when the associated route gets called or from the controller of that route. The callback function passed to the previous class/controller will set the data retrieved to some properties of the controller, or it could even be its model. Simple example,
http://emberjs.jsbin.com/AsOcAbU/1/edit
js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
/*model: function() {
return ['red', 'yellow', 'blue'];
},*/
setupController:function(controller,model){
this.controllerFor('myJSON').findJSONData(function(data){
controller.set('model',data);
});
}
});
App.IndexController = Ember.ArrayController.extend({
});
App.MyJSONController = Ember.Controller.extend({
findJSONData:function(callback){
var data = ['red', 'yellow', 'blue'];/*this will come from the server with an ajax call i.e. $.ajax({...})*/
if(callback){
callback(data);
}
}
});
hbs
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#if model}}
<ul>
{{#each item in controller}}
<li>{{item}}</li>
{{/each}}
</ul>
{{else}}
loading ....
{{/if}}
</script>
In the context of complete application you will probably need to iterate the json data and create ember objects out of it. That is really simple as well thanks to ember,
http://emberjs.jsbin.com/oWetaDuH/1/edit
/*let's say you retrieve color objects from php*/
findJSONData:function(callback){
setTimeout(function(){
/*this will come from the server
with an ajax call i.e. $.ajax({...})*/
var data = [{color:'red'}, {color:'yellow'}, {color:'blue'}];
if(callback){
callback(data);
}
},2000);//mimic ajax call
}
/*and you need to use ember magic bindings, so you have your own objects to represent the domain model*/
App.MyColor = Ember.Object.extend({
color:null
});
/*then the code for retrieving will become*/
setupController:function(controller,model){
this.controllerFor('myJSON').findJSONData(function(data){
var myColors=[];
data.forEach(function(jsonColor){
myColors.pushObject(App.MyColor.create(jsonColor));/*this is all you need to create the ember object !!*/
});
controller.set('model',myColors);
});
}
and hbs
<script type="text/x-handlebars" data-template-name="index">
{{#if model}}
<ul>
{{#each item in controller}}
<li>{{item.color}}</li>
{{/each}}
</ul>
{{else}}
loading ....
{{/if}}
</script>
update
If it is required to pause routing until the model is resolved, then promises should be used as explained in the guides
http://emberjs.com/guides/routing/asynchronous-routing/
In this case, since jQuery ajax function returns a promise, the previous example could look like,
http://emberjs.jsbin.com/mogicira/1/edit
js
App.IndexRoute = Ember.Route.extend({
model:function(controller,model){
return this.controllerFor('myJSON').findJSONData(function(data){
var myColors=[];
data.forEach(function(jsonColor){
myColors.pushObject(App.MyColor.create(jsonColor));
});
return myColors;
});
}
});
App.IndexController = Ember.ArrayController.extend({
});
App.MyJSONController = Ember.Controller.extend({
findJSONData:function(callback){
return $.ajax({url:""}).then(function(data){
data = [{color:'red'}, {color:'green'}, {color:'blue'}];
if(callback){
return callback(data);
}
});
}
});

Answer 2

If you like ember & ember-data it should be for the less-code and code maintenance between other not less important concerns
If you feel comfortable with php, move your php code to a modern FrameWork for not reinventing the weel and in order to obtain similar benefits that ember done to your front-end
I'm developing an ember app feeded with Codeigniter http://ellislab.com/codeigniter and codeigniter rest service https://github.com/philsturgeon/codeigniter-restserver but I don't recommend you this combination
I my opinion you should try Laravel http://net.tutsplus.com/tutorials/php/laravel-4-a-start-at-a-restful-api/ or directly go to Rails/Rails-API