没有Ember数据的Ember [英] Ember without Ember Data

查看:123
本文介绍了没有Ember数据的Ember的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我有自己的模型,那些是由路由创建的模型函数。



但是,前端对象和后端对象之间的维护状态是一场噩梦。
特别是当一条路线使用其他路线模型时。




  • 如何实现这一点,应该如何写我自己的商店和型号方法?

  • 我应该使用Ember Data(即使它不在版本1.0?)也许是Ember Data 1.0上的ETA?

  • 将代码写入每次更改模型时,请更新前端的模型?

  • 另一种方法?



我在做最好的做法,还是应该做不同的做法?
我的直觉是,没有使用Ember Data我应该写我自己的商店。我很想得到你们中的一些人的反馈。



模型示例:

  App.Person = Ember.Object.extend(App.Serializable,Em.Copyable,{
user_email:null //用于路由动态区段和旧电子邮件时进行电子邮件更改
,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 。{ c $ c>

加载类模型的示例:

 code> App.UsersRoute = App.AuthenticatedRoute.extend({
model:function(){
return new Ember.RSVP.Promise(function(resolve,reject){
$ .GE tJSON('/ users')然后(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({
需要:['users']
,applyPersonAssign:function(person,need,项目){
need.set('allocate',person);
var updateObject = Ember.copy(project,true);
if(Ember.isEmpty(need.get('inProject '))){
updateObject.projectNeeds.pushObject(需要);
}

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


解决方案

您不一定需要重新创建Ember Data存储。 Ember与POJO工作正常,您也可以将您的POJO包装在Ember对象中,为您提供内置功能的一些乐趣。



正在建立一个缓存的自定义适配器结果可能很方便。



以下是我创建支持缓存的适配器的示例。您可以慢慢地基于您需要的所有基本事项的概念。

  App.FooAdapter = Ember.Object.extend {
cache:{},
find:function(id){
var self = this,
record;
if(record = this.cache [id] ){
return Ember.RSVP.cast(record);
}
else
{
返回新的Ember.RSVP.Promise(function(resolve){
resolve($ .getJSON('http://www.foolandia.com/foooo/'+ id));
})然后(function(result){
record = self.cache [id] = App.Foo.create(result);
return record;
});
}
}
});

在下面的示例中,我使用容器在所有路由/控制器上注册适配器,所以我有懒惰的方式访问它。



http://emberjs.jsbin.com/OxIDiVU/742/edit



如果你一直希望它是一个承诺:



http://emberjs.jsbin.com/OxIDiVU/ 740 / edit



可重用性



上面的例子可能会让你看起来像做一吨的工作,但不要忘记,Ember是超级可重用的,利用魔法。

 应用程序。 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'//这将创建调用:http://www.foolandia.com/foo/1
});

App.BarAdapter = App.MyRestAdapter.extend({
type:'bar'//这将创建调用:http://www.foolandia.com/bar/1
});

这是Ember Data / Ember Model的基本思想。他们试图创造大量的默认值,并且内置酷,但有时它是过度的,特别是如果你只是消费数据,而不是做CRUD。



示例: a href =http://emberjs.jsbin.com/OxIDiVU/744/edit =nofollow noreferrer> http://emberjs.jsbin.com/OxIDiVU/744/edit



另外你也可以看这个(说同样的东西):



如何为ember.js创建自定义适配器?


Ember data is still not at version 1.0 and thus I decided to use Ember without Data models.

I have my own models, and those are created by the route model function.

However maintaining state between the frontend objects and the backend objects is a nightmare. Especially when one route uses another routes models.

  • How can this be achieved, should I write my own store and model find method?
  • Should I use Ember Data (even though it's not at version 1.0 ?) perhaps an ETA on Ember Data 1.0 ?
  • write code to update the models on the frontend each time I change a model?
  • Another method?

Is what I'm doing best practices or should I be doing it differently? My gut feeling is that without using Ember Data I should write my own store. I'd love to get feedback from some of you guys.

Example of a model:

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

Example of how I load the class models:

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

Subroutes use the model:

App.UsersAvailableRoute = App.AuthenticatedRoute.extend( {
     model : function () {
        return {
          allUsers :  Ember.ArrayController.create({
            content : this.modelFor('users').filter( function (user) {
                      return user.availablity === 100
                      }),

Example of how I update the model in a controller:

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

解决方案

You don't necessarily need to recreate the Ember Data store. Ember works just fine with POJOs, you can also wrap your POJOs in an Ember Object to give you some fun built in features.

That being said creating a custom adapter which caches results could be convenient.

Here's an example where I create an adapter that supports caching. You can slowly build on the concept for all of the basic things you need.

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

In the examples below, I use the container to register the adapter on all of my routes/controllers so I had lazy easy access to it.

http://emberjs.jsbin.com/OxIDiVU/742/edit

If you always want it to be a promise:

http://emberjs.jsbin.com/OxIDiVU/740/edit

Reusability

The example above may make it look like you'd have to do a ton of work, but don't forget, Ember is super reusable, take advantage of the magic.

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

This is the basic idea of what Ember Data/Ember Model is. They've tried to create a ton of defaults and built in coolness, but sometimes it's overkill, especially if you are just consuming data and not doing CRUD.

Example: http://emberjs.jsbin.com/OxIDiVU/744/edit

Also you can read this (says the same stuff):

How do you create a custom adapter for ember.js?

这篇关于没有Ember数据的Ember的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆