Question

这就是我的products.index看起来的样子：

enter image description here

当我点击＆＃34;创建产品＆＃34;链接。它将我发送给/products/new。我在那里看到一个表单，但我不提交它，而是点击＆＃34;取消＆＃34;按钮。我的控制器中有一个操作，将我重定向到products.index页面。

  actions: {
    cancel: function() {
      this.transitionToRoute('products.index');

      return false;
    }
  }

在/products中，我看到了：

enter image description here

哪个是空产品...... API中的数据库没有产品。我刷新页面，空的产品消失了。怎么回事？

完整代码：

// app/routes/products/index.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('product');
  }
});

// app/routes/products/new.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('product');
  },
});

// app/controllers/select-addresses/new.js
export default Ember.ObjectController.extend({
  actions: {
    cancel: function() {
      this.transitionToRoute('products.index');

      return false;
    }
  }
});

// app/templates/products/index.hbs
<h1>Products index</h1>

<p>{{#link-to 'products.new'}}Create product{{/link-to}}</p>

<ul>
  {{#each}}
  <li>
    {{#link-to 'products.show' this}}<strong>{{name}}</strong>{{/link-to}}
    <br />Description: {{description}}
    <br />Amount in cents: {{amountInCents}}
    <br />{{link-to 'Edit' 'products.edit' this}} &middot; <a href="#" {{action "delete" this}}>Delete</a>
    <br /><br />
  </li>
  {{/each}}
</ul>

// app/templates/products/new.hbs
<h1>Add a new friend</h1>

<form {{action "save" on="submit"}}>
  <p>
    <label>Name:
      {{input value=name}}
    </label>

    {{#each error in errors.name}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Description:
      {{input value=description}}
    </label>

    {{#each error in errors.description}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Amount in cents:
      {{input value=amountInCents}}
    </label>

    {{#each error in errors.amountInCents}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Status:
      {{input value=status}}
    </label>

    {{#each error in errors.status}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <input type="submit" value="Save"/>
  <button {{action "cancel"}}>Cancel</button>
</form>

{{outlet}}

Answer 1

我的猜测（作为非Ember专家）：

在您的Ember.Route.extend中，对于模型，您可以拨打store.createRecord。通过此，您可以向商店添加空产品。取消表单时，不会从商店中删除虚拟产品，因此在加载索引视图时它仍然存在。

Answer 2

使用ember-data-route然后你应该

{{#each product in model}}
  {{#unless product.isNew}}
    {{product.name}}
  {{/unless}}
{{/each}}

如果您不想使用ember-data-route，则可以始终使用resetController并执行model.deleteRecord()。

// app/routes/products/new.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('product');
  },

  resetController: function (controller, isExiting) {
    var model = controller.get('model');

    if (isExiting && model.get('isNew')) {
      model.deleteRecord()
    }
  }
});

有关更深入的版本，请参阅ember-data-route is doing。

Answer 3

因此，在产品索引路线中，我将return this.store.find('product');更改为return this.store.find('product', {});

问题消失了！我不确定这是否是正确的方法，但到目前为止还没有问题！

// app/routes/products/index.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    // Before
    // return this.store.find('product');

    // After
    return this.store.find('product', {});
  }
});

更新：在转换之前执行this.store.unloadAll('product');似乎也有效。这似乎是一个更自然的解决方案。根据此拉取请求https://github.com/emberjs/data/pull/1714

但是，单击浏览器上的后退按钮仍会呈现空产品。

基本上是这样的：

// app/routes/products/index.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('product');
  }
});

// app/controllers/select-addresses/new.js
export default Ember.ObjectController.extend({
  actions: {
    cancel: function() {
      this.store.unloadAll('product');
      this.transitionToRoute('products.index');

      return false;
    }
  }
});

Answer 4

您可以使用deactivate路由挂钩从商店中删除新的（非持久的）记录。

// app/routes/products/new.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('product');
  },
  deactivate: function () {
    var model = this.modelFor('products.new');
    if (model.get('isNew')) {
      model.destroyRecord();
    }
  }
});

如果您在不使用.save()持久保存记录的情况下离开路线，则会破坏商店中的记录，因此无法在模板中呈现。

为什么我在products.index中看到空产品？

4 个答案: