没有Ember Data的Ember

时间:2014-06-25 12:37:36

标签: javascript model-view-controller ember.js ember-data

Ember数据仍未达到版本1.0,因此我决定使用没有数据模型的Ember。

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

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

  • 如果我自己创建商店和模型查找方法,怎么能实现呢?
  • 我应该使用Ember数据(即使它不是1.0版本吗?)也许是Ember Data 1.0上的ETA?
  • 每次更改模型时都编写代码来更新前端的模型?
  • 另一种方法?

我做的是最佳做法,还是我应该采取不同的做法? 我的直觉是,如果不使用Ember Data,我应该写自己的商店。我很乐意收到你们中的一些人的反馈。

模型示例:

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

3 个答案:

答案 0 :(得分:22)

您不一定需要重新创建Ember数据存储。 Ember适用于POJO,您也可以将您的POJO包装在Ember对象中,为您提供一些有趣的内置功能。<​​/ p>

据说创建一个缓存结果的自定义适配器可能很方便。

这是我创建支持缓存的适配器的示例。您可以慢慢地构建所需的所有基本功能的概念。

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

在下面的示例中,我使用容器在我的所有路由/控制器上注册适配器,因此我可以轻松访问它。

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

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

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

的可重用性

上面的例子可能会让你觉得你需要做大量的工作,但不要忘记,Ember是超级可重复使用的,利用魔法。

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

这是Ember Data / Ember Model的基本概念。他们试图创造大量的默认值并建立在酷炫之中,但有时它太过分了,特别是如果你只是消耗数据而不是做CRUD。

示例:http://emberjs.jsbin.com/OxIDiVU/744/edit

你也可以读这个(说同样的东西):

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

答案 1 :(得分:2)

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

简而言之,我们发现使用Ember Data取得了一些成功,如果这是你想去的路线,我们就不会抱怨它。

答案 2 :(得分:2)

如果您熟悉Ruby,Rails是后端的绝佳解决方案。

ember社区支持使用ember-rails gem的rails,它允许您使用rails作为服务JSON的方法。

入门

  • 将gem添加到您的应用程序Gemfile:

    gem&#39; ember-rails&#39; gem&#39; ember-source&#39;,&#39;〜&gt; 1.9.0&#39; #或您需要的版本

  • 运行bundle install

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

    rails生成ember:bootstrap

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

从头开始构建新项目

Rails支持从模板源ruby文件构建项目的能力。

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

rails new my_app -m http://emberjs.com/edge_template.rb

安装最新版本的ember和ember-data。应该指出的是 getting started guide中的示例 设计使用已发布的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

确保更新序列化程序

class ProjectSerializer < ApplicationSerializer
  attributes :id, :name, :description, :imgUrl, :deployUrl
end 

设置路线

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