2015-09-29 65 views
0

我很努力地按照ember 2.0's documentation删除记录,然后重定向到一个新的网址。当我尝试时,我得到以下错误到控制台:在Emberjs删除记录

Error while processing route: pencils Attempted to handle event `pushedData` on <[email protected]:pencil::ember523:null> while in state root.deleted.inFlight. Error: Attempted to handle event `pushedData` on <[email protected]: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'); 
    } 
}); 
+0

查看我的回答。 –

+0

亨利和torazaburo的答案似乎并没有更新我的药物观点。也就是说,'delete api'被击中,但商店没有更新。当转换到“铅笔”时,它会显示旧数据,除非我刷新页面。我将奖赏赏金给谁更新他们的答案,并首先解决这个最后的难题。如果一个新的答案跳入下面列出的一个集团,我会检查它并给亨利奖金。 – mh00h

+0

我对任何“药物”视图都没有看到任何地方。如果你的意思是铅笔,请显示路线,控制器和模板。 –

回答

8

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

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

请参阅我上面的评论以获得您的答案的进一步完善请求。 – mh00h

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'); 
}, 
+0

这导致GET GET http://0.0.0.0:6543/api/pencils/%3Cname-emberjs%40route% 3Apencils%3A%3Aember590%3E 500(内部服务器错误)'。我想知道是否需要在transitionTo之前运行save(),但这会产生一个不同的问题:'处理路由时出错:pencils尝试在上处理事件pushData while在状态root.deleted.inFlight中。错误:试图在上处理事件pushData,同时处于root.deleted.inFlight状态。 – mh00h

+0

答复已更新。您无法获取已删除的记录,因此删除后无法保存。 –

+2

这只是部分作品。调用deleteRecord()不会将'DELETE'请求发送给api;它只影响当地的商店。将'deleteRecord()'改为'destroyRecord()'会导致它重新出错,并记录'root.deleted.inFlight'错误。 – mh00h

3

让承诺履行本身:

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

编辑:摆脱const _this的。

+2

好的答案,再加上一个,但是很小的挑剔,因为我们为了能够使用ES6和胖箭头而付出了所有的麻烦,难道我们不能收紧代码并同时摆脱'_this'吗?另外,它可能会稍微更具可读性而不是嵌套它们。 –

+0

请参阅我上面的评论以获得您的答案的进一步完善请求。 – mh00h