删除Emberjs中的记录

时间:2015-09-29 18:47:07

标签: javascript ember.js ember-data

我正在努力关注ember 2.0's documentation删除记录,然后重定向到新网址。当我尝试时,我得到以下错误到控制台:

Error while processing route: pencils Attempted to handle event `pushedData` on <name-emberjs@model:pencil::ember523:null> while in state root.deleted.inFlight.  Error: Attempted to handle event `pushedData` on <name-emberjs@model:pencil::ember523:null> while in state root.deleted.inFlight. 

我的文件如下。

路线:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.resource('pencilview', { path: '/pencils/:pencil_id' });
    this.resource('pencilcreate', { path: '/pencils/new' });
    this.resource('pencils');
});


export default Router;
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.resource('pencilview', { path: '/pencils/:pencil_id' });
    this.resource('pencilcreate', { path: '/pencils/new' });
    this.resource('pencils');
});


export default Router;

路由/ pencilview.js

export default Ember.Route.extend({
    model: function(params) {
      return this.store.find('pencil', params.pencil_id);
    },

    actions: {
        save(pencil){
            this.store.find('pencil', pencil.id).then(function(pencil){
                pencil.save();
            })
            this.transitionTo('pencils');
        },

        remove(id){
            this.get('store').find('pencil', id).then(function(pencil2){
                pencil2.destroyRecord();
            });
            this.transitionTo('pencils');
        },

      cancel(pencil){
          this.store.find('pencil'.pencil.id).then(function(pencil){
          })
      }
  }
});

模板/ pencilview.hbs

<h2>Single Pencil View</h2>
<p>Pencil ID: {{model.id}}</p>

<p>
<label for='name'>Name</label>
{{input type="text" id="name" value=model.name}}</p>

<p>
<label for='name2'>Name2</label>
{{input type="text" id="n2" value=model.n2}}</p>

<p>
<label for='name3'>Name3</label>
{{input type="text" id="n3" value=model.n3}}</p>

<p><button {{action "remove" model.id}}>Delete</button></p>
<p><button {{action "save" model}}>Save</button></p>

{{#link-to 'pencils'}}Pencils{{/link-to}}

控制器/ *

all missing except for pencilcreate.js, not applicable here

模板/ pencils.hbs

<h2>All Pencils</h2>
<p>{{#link-to 'pencilcreate' (query-params direction='pencils') class='btn btn-default' }}Create New Pencil{{/link-to}}</p>

<table id='pencil_allTable' class='display'>
<thead><tr><td>ID</td><td>Brand</td><</tr></thead>
<tbody>
{{#each model as |pencil|}}
  <tr>
    <td>{{#link-to "penciliew" pencil class='btn btn-default'}}{{pencil.id}}{{/link-to}}</td>
    <td>{{pencil.brand}}</td>
  </tr>
{{/each}}
</tbody></table>

<script>
$(document).ready( function () {
    $('#pencil_allTable').DataTable();
    } );
</script>

路由/ pencil.js

export default Ember.Route.extend({
  model() {
    return this.store.findAll('pencil');
  }  
});

3 个答案:

答案 0 :(得分:8)

这是另一个答案的版本,只是收紧了一点。

remove(id) {
  this.get('store').find('pencil', id) . 
    then(pencil2 => pencil2.destroyRecord())
    .then(() => this.transitionTo('pencils'));
}

答案 1 :(得分:3)

您已被this范围内的人咬伤:

this.transitionTo('pencils').then(function(id){
    this.get('store') // <== this === undefined

此代码应该有效:

remove(id) {
    this.get('store').find('pencil', id).then(pencil2 => {
        pencil2.deleteRecord();
    });
    this.transitionTo('pencils');
},

答案 2 :(得分:3)

让承诺实现自己:

remove(id){
        this.get('store').find('pencil', id).then((pencil2) => {
            pencil2.destroyRecord().then(() => {
               this.transitionTo('pencils');
           });
        });           
    },

编辑:摆脱const _this