php - 使用 PHP 后端方法进行 emberjs 数据传输的挫败感

Question

我试图做这三件简单的事情，但我无法在几乎一个月的时间里弄清楚，一个词——挫败!现在我怀疑 emberjs 是否真的值得......

我想要:

1. 仅使用 .php 文件从数据库获取数据，数据将为 json 格式

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

2. 现在的问题是，如何在没有 ember 数据的情况下将这些数据保存在“存储”中？

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

如有不明白的地方，请在评论中回复!非常感谢。

Answer 1

Chen，说实话，没有 ember-data 处理数据是很容易的。我用过它几次，其中一些与构建相当大的前端系统有关。主要原因是当时的ember数据不太稳定，没有激发太多的信心。另一个原因是，正如您将看到的，它非常简单。

您所要做的就是创建一个类(拥有一个单例 ember Controller 也很好)，该类将从服务器获取数据并将数据发布到服务器。数据格式应该是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);
                }
            }
        });
}

当关联的路由被调用或从该路由的 Controller 调用时，可以调用检索数据的函数。传递给前一个类/ Controller 的回调函数会将检索到的数据设置为 Controller 的某些属性，甚至可能是其模型。简单的例子， 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);
    }

    });
  }

});