3

我刚开始使用 Ember.js，并且想要实现一个非常简单的流程。

在概览屏幕上，我有一个新按钮，允许用户添加记录。保存后，用户将返回到概览屏幕，在该屏幕上他可以在概览中看到新创建的记录。

用户使用 linkTo 导航到“新记录”页面

{{#linkTo locations.new}} Insert location {{/linkTo}}

这会触发以下路线，其中准备了新模型，以便可以将其绑定到屏幕。

App.LocationsNewRoute = Ember.Route.extend({
  model: function() {
    return App.Location.createRecord();
  }
});

新位置屏幕的车把模板如下所示：

<script type="text/x-handlebars" data-template-name="locations/new">
   <h1>New location</h1>
   Latitude :  {{view Ember.TextField valueBinding="latitude"}}
   Longitude : {{view Ember.TextField valueBinding="longitude"}}
   <p><button {{action addItem this}}>Add record</button></p>
</script>

addItem 是这样实现的：

App.LocationsNewController = Ember.ObjectController.extend({
  addItem: function(location) {
    this.get("store").commit();
    this.get("target").transitionTo("locations");

  }
});

我遇到的几个问题：

模型商店交易

  • 一旦用户导航（使用 linkTo）到新的位置页面，就会创建一个空记录（使用 createRecord）。我相信这是将控件绑定到模型所必需的。
  • 我注意到，当用户填写纬度，但决定返回概览（使用链接至）时，部分填充的模型将被放入概览中。
  • 刷新页面会移除部分填充的对象

在使用 Ember.js 时，我已经注意到了很多......通过 linkTo 转换到新路由和在浏览器中刷新它之间的区别有时是巨大的。

问题：我需要使用什么模式来实现“添加新记录”流程。我只是想导航到一个新屏幕并有一个保存/取消按钮。我只希望在单击保存时添加记录。createRecord 是否应该仅在单击“保存”时调用，但是如何绑定控件？

模型重复

当我的 REST 服务在执行 POST（添加记录）后返回以下（非 ember.js 标准）JSON 时：

{
  "latitude": "1.123",
  "longitude": "1.123",
  "accuracy": null,
  "_id": "517d2dcf377dcffc11000009"
}

我得到以下行为：

  • 当用户填写一个纬度/经度并点击保存按钮时，他返回概览，在概览中两次找到他新创建的记录。
  • 单击保存后，控制台中显示错误：您的服务器返回了一个带有密钥纬度的哈希，但您没有它的映射。
  • 刷新页面摆脱了重复。

我能够通过在执行 POST 后返回 ember.js 标准 JSON 来解决这个问题

{
  "location": {
    "latitude": "1.123",
    "longitude": "1.123",
    "accuracy": null,
    "_id": "517d31457b40fcbc2a000003"
  }
}

该应用程序配置为使用 _id 作为主键，因为我正在使用 mongodb。

App.Adapter = DS.RESTAdapter.extend({
  serializer: DS.RESTSerializer.extend({
    primaryKey: function (type){
      return '_id';
   }
  })
});

我现在可以理解为什么 Ember.js 抱怨纬度键（因为它期望位置根元素），但我不明白为什么它将模型两次添加到集合中（仅使用 1 个 POST）

所以2个问题：

  • 我的流程有什么问题，我该如何解决？
  • 当 REST api 返回非 ember.js 标准 JSON 时，为什么我最终会出现重复。
4

1 回答 1

1

模型商店交易

将您的创作包装到新交易中。这不会阻止记录在列表中可见（您始终可以过滤列表以拒绝新记录）。在您的路由器中，您可以在退出状态时回滚事务。就像是：

App.LocationsNewRoute = Ember.Route.extend({
  activate: function() {
    this.transaction = DS.defaultStore.transaction(),
  },

  model: function() {
    return this.transaction.createRecord(App.Location);
  }
});

在您的save处理程序中，您希望提交记录的事务（而不是商店的默认事务）。

更新：不要回滚deactivate

模型重复

“你的服务器返回了一个带有密钥纬度的哈希，但你没有它的映射。” Ember 数据试图旁加载 JSON 中返回的每个属性/键。Ember 数据期望返回的对象位于 JSON 中的根键下（如您所见）。

我不知道你为什么有重复。

更新 2：如何不显示新创建的记录

我在评论中说错了，在事务中创建的记录属于find. 我忘记了我已经更新了我的代码来做到这一点：

App.LocationsController = Ember.ArrayController.extend({
  persisted: function() {
    return this.get('arrangedContent').filter( function(contact) {
      if( !contact.get('isNew') ) {
        return true;
      }
    });
  }.property('arrangedContent.@each.isNew', 'arrangedContent')
})

然后在您的模板中：

{{#each persisted}}
  // whatever you need
{{/each}}
于 2013-04-28T15:17:00.233 回答