使用emberjs数据传输的后端方法为PHP的挫败感

时间:2013-11-11 18:12:20

标签: php jquery json ember.js ember-data

我试着做这三件简单的事情,但我已经不能在一个世界里找出差不多一个月了,一句话就说了......现在我怀疑emberjs是否真的值得......

我想:

  1. 只使用.php文件从数据库中获取数据,数据将采用json格式

    注意:我这样做了,in other SO question I asked,所以我不再重复了。

  2. 现在,问题是,如何在没有包含数据的情况下将这些数据保存在“商店”中?

  3. 有没有关于php如何与emberjs连接的可用教程?我试着阅读它的REST适配器,但似乎需要某种类型的JSON API。如果我使用纯PHP代码作为后端,我是否需要开发JSON API?

  4. 如果有任何部分不清楚,请回复评论!非常感谢。

2 个答案:

答案 0 :(得分:3)

Chen,说实话,没有ember-data就很容易处理数据。我已经使用过几次,其中一些与构建相当大的前端系统有关。主要原因,当时的余烬数据并不稳定,并没有激发太多信心。另一个原因是,你会发现它非常简单。

你所要做的就是创建一个类(拥有一个单独的ember控制器也很好),它将从服务器获取数据并将数据发布到服务器。数据格式应为JSON,以使所有过程更容易和更清晰。您可以通过使用简单的ajax调用来实现此目的,

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);
                }
            }
        });
}

可以在调用关联路径时或从该路径的控制器调用用于检索数据的函数。传递给前一个类/控制器的回调函数会将检索到的数据设置为控制器的某些属性,或者甚至可能是其模型。简单的例子, 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>

在完整应用程序的上下文中,您可能需要迭代json数据并从中创建ember对象。这非常简单,感谢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);
      });
  }

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>

<强>更新

如果需要暂停路由直到解析模型,则应按照指南中的说明使用promises

http://emberjs.com/guides/routing/asynchronous-routing/

在这种情况下,由于jQuery ajax函数返回一个promise,前面的例子看起来像,

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);
    }

    });
  }

});

答案 1 :(得分:2)

如果你喜欢ember&amp; ember-data应该用于其他不太重要的问题之间的代码和代码维护较少

如果你对php感到满意,可以将你的php代码转移到现代的FrameWork,不要重新发明weel,以获得类似于你的前端所做的类似的好处

我正在开发一个使用Codeigniter http://ellislab.com/codeigniter和codeigniter rest service https://github.com/philsturgeon/codeigniter-restserver 的ember应用程序,但我不推荐你这个组合

我认为您应该尝试Laravel http://net.tutsplus.com/tutorials/php/laravel-4-a-start-at-a-restful-api/或直接转到Rails / Rails-API