Question

我刚开始使用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）。我认为这需要将控件绑定到模型。
我注意到当用户填写纬度但决定返回概览（使用linkTo）时，部分填充的模型会被放入概览中。
刷新页面会删除部分填充的对象

我在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时，为什么我最终得到重复项。

Answer 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}}

何时调用createRecord以及如何处理存储事务

1 个答案: