Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/409.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 无余烬数据的余烬_Javascript_Model View Controller_Ember.js_Ember Data - Fatal编程技术网

Javascript 无余烬数据的余烬

Javascript 无余烬数据的余烬,javascript,model-view-controller,ember.js,ember-data,Javascript,Model View Controller,Ember.js,Ember Data,余烬数据仍然不是1.0版,因此我决定使用没有数据模型的余烬 我有自己的模型,这些模型是由route model函数创建的 然而,维护前端对象和后端对象之间的状态是一场噩梦。 尤其是当一条路线使用另一条路线模型时 如何实现这一点,我应该编写自己的存储和模型查找方法吗 我是否应该使用余烬数据(即使它不是1.0版?)或者余烬数据1.0上的ETA 每次更改模型时,是否编写代码更新前端上的模型 另一种方法 我所做的是最佳实践还是应该有所不同? 我的直觉是,如果不使用余烬数据,我应该编写自己的存储。我很

余烬数据仍然不是1.0版,因此我决定使用没有数据模型的余烬

我有自己的模型,这些模型是由route model函数创建的

然而,维护前端对象和后端对象之间的状态是一场噩梦。 尤其是当一条路线使用另一条路线模型时

  • 如何实现这一点,我应该编写自己的存储和模型查找方法吗
  • 我是否应该使用余烬数据(即使它不是1.0版?)或者余烬数据1.0上的ETA
  • 每次更改模型时,是否编写代码更新前端上的模型
  • 另一种方法
我所做的是最佳实践还是应该有所不同? 我的直觉是,如果不使用余烬数据,我应该编写自己的存储。我很想从你们中得到反馈

模型示例:

App.Person = Ember.Object.extend(App.Serializable,Em.Copyable,{
  user_email : null //used in routing dynamic segements and as old email when making changes to email
  ,first_name: null
  , last_name: null
  , fullname : function () {
    return this.first_name + ' ' + this.last_name;
  }.property('first_name','last_name').cacheable()
};

App.Person.reopenClass({
  createRecord: function(data) {
    return App.Person.create({
      user_email : data.email
      , first_name: data.first_name
      , last_name : data.last_name
}});
我如何加载类模型的示例:

App.UsersRoute = App.AuthenticatedRoute.extend( {
  model : function () {
    return new Ember.RSVP.Promise(function(resolve, reject) {
      $.getJSON('/users').then(function(usersData) {
        var userObjects = [];
          usersData.forEach(function (data) {
            userObjects.pushObject(App.Person.createRecord(data));
          });
        resolve( userObjects);
        },function(error) {
          reject(error);
      });
    })
  },
子例程使用以下模型:

App.UsersAvailableRoute = App.AuthenticatedRoute.extend( {
     model : function () {
        return {
          allUsers :  Ember.ArrayController.create({
            content : this.modelFor('users').filter( function (user) {
                      return user.availablity === 100
                      }),
如何在控制器中更新模型的示例:

App.UsersAvailableController = Ember.ArrayController.extend({
needs : ['users']
    ,applyPersonAssign : function (person,need,project) {
          need.set('allocated',person);
          var updateObject = Ember.copy(project,true);
          if (Ember.isEmpty(need.get('inProject'))) {
            updateObject.projectNeeds.pushObject(need);
          }

          return $.ajax({
            url: '/projects/' + updateObject.get('codename'),
            "type": "PUT",
            "dataType": "json",
            data: updateObject.serialize()
          })

您不一定需要重新创建余烬数据存储。余烬与POJO配合得很好,您还可以将POJO包装在余烬对象中,为您提供一些有趣的内置功能

也就是说,创建一个缓存结果的自定义适配器可能会很方便

下面是一个示例,其中我创建了一个支持缓存的适配器。你可以慢慢地为你需要的所有基本东西建立这个概念

App.FooAdapter = Ember.Object.extend({
  cache:{},
  find: function(id){
    var self = this,
        record;
    if(record = this.cache[id]){
      return Ember.RSVP.cast(record);
    }
    else
    {
      return new Ember.RSVP.Promise(function(resolve){
        resolve($.getJSON('http://www.foolandia.com/foooo/' + id));
      }).then(function(result){
        record = self.cache[id] = App.Foo.create(result);
        return record;
      });
    }
  }
});
在下面的示例中,我使用容器在所有路由/控制器上注册适配器,以便轻松访问它

如果你总是希望它成为一个承诺:

可重用性 上面的例子可能会让你看起来需要做大量的工作,但别忘了,余烬是超级可重用的,利用它的魔力

App.MyRestAdapter = Em.Object.extend({
  type: undefined,
  find: function(id){
    $.getJSON('http://www.foolandia.com/' + this.get('type') + '/' + id
  }
});

App.FooAdapter = App.MyRestAdapter.extend({
  type: 'foo' // this would create calls to: http://www.foolandia.com/foo/1
});

App.BarAdapter = App.MyRestAdapter.extend({
  type: 'bar' // this would create calls to: http://www.foolandia.com/bar/1
});
这就是余烬数据/余烬模型的基本概念。他们试图创建大量的默认值和内置的酷度,但有时这是过分的,特别是如果您只是在使用数据而不使用CRUD

例如:

您也可以阅读以下内容(内容相同):


在我工作的地方,我们使用的是Ember数据和Ember CLI,尽管它们非常不稳定。到目前为止,余烬的数据并没有在这里造成太多的痛苦。这个商店很容易理解,而且Ember上关于这个框架方面的文档也相当不错。我一直面临的一个问题是动态排序模型,当我修改模型的内容时,它们会根据我所做的更改进行重新排列,在这条路上的某个地方发生了一些非常奇怪的事情,但不确定这是否是Ember数据的错


简而言之,我们在使用Ember数据方面取得了一些成功,如果您希望这样做的话,我们也不会对此抱怨。

如果您熟悉Ruby,Rails是一个非常好的后端解决方案

ember社区支持rails,它允许您使用rails作为服务JSON的手段

开始
  • 将gem添加到应用程序文件:

    宝石“余烬轨道” gem'ember source'、“~>1.9.0”或您需要的版本

  • 运行
    bundle安装

  • 接下来,生成应用程序结构:

    rails生成余烬:引导

  • 重新启动服务器(如果正在运行)

从头开始构建新项目 Rails支持从模板源ruby文件构建项目

要构建以Ember为中心的Rails项目,只需在命令行中键入以下内容:

rails new my_app -m http://emberjs.com/edge_template.rb
安装最新版本的余烬和余烬数据。应当指出的是 中的示例 已设计为使用ember的发布版本:

rails generate ember:install
然后,您只需在控制器中呈现json,如下所示

class ProjectsController < ApplicationController
    def index
        respond_to do |format|
            format.json { render json: Project.all }
        end
    end

    def show
        respond_to do |format|
            format.json { render json: Project.where(name: params[:name])}
        end
    end
end
最后是你的模型

var attr = DS.attr;

EmberRailsBlog.Project = DS.Model.extend({
    name: attr(),
    description: attr(),
    imgUrl: attr(),
    deployUrl: attr()
});

只是为了证实这是有效的。。。。我们非常广泛地使用这种方法,成功地获得了复杂的对象图和各种疯狂的web服务:)或者您也可以遵循此指南@fanta谢谢,我看过那篇文章,但它使用ES6模块(我没有使用,它使用的是我没有使用的ember cli:)..@kingpin2k如果您已经为单个元素找到了FindAll,您如何将其与FindAll一起使用?您是否迭代以确保不会两次加载同一个对象?我从另一段代码复制了这段代码,在那里我期望RSVP.Promise的一些功能(最后还是什么,我不记得了)。事实上,我会为正确的工作使用正确的工具,余烬数据使简单的事情变得简单,而困难的事情变得非常困难(在当前状态下)。如果您对编程感到满意,那么使用自己的编程就不会有太大的飞跃,并且可以根据您的需要轻松地进行定制。jquery已经提供了强大的XHR功能,这一点尤其如此(不管怎么说,jquery已经存在于您的应用程序中)。
EmberRailsBlog.ProjectsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('project');
    }
});
var attr = DS.attr;

EmberRailsBlog.Project = DS.Model.extend({
    name: attr(),
    description: attr(),
    imgUrl: attr(),
    deployUrl: attr()
});