在Ember中删除一条记录数据不工作

Question

我在每一行都有一个表（一个组件）和一个删除按钮。当点击删除按钮时，应该删除特定的行。

试过以下代码：

MyComponent.js

import Ember from 'ember'; 

    export default Ember.Component.extend({ 
    actions:{ 
    deleteCartRecord(cartDetails){ 
     debugger; 
     this.sendAction('deleteRecord',cartDetails); 
    } 
} 

}); 

在MyComponent.hbs

{{#each model.orderParts as |newCart|}} 
    <div class="card-wrapper col-lg-12 col-md-12"> 
    <div class="col-lg-2 col-md-2"> 
     <div class="order-id">{{newCart.partNumber}}</div> 
     {{#if (gte newCart.promiseQty newCart.quantity)}} 
    <div class="order-status delivered">{{env.APP.StockAvailable}}</div> 
    {{else}} {{#if (gt newCart.promiseQty '0'(and (lt newCart.promiseQty newCart.quantity)))}} 
    <div class="order-status intransit">{{env.APP.LowInStock}}</div> 
    {{else}} {{#if (eq newCart.promiseQty '0')}} 
    <div class="order-status outofstock">{{env.APP.OutofStock}}</div> 
    {{/if}} {{/if}} {{/if}} 
</div> 
<div class="col-lg-3 col-md-3"> 
    <div class="item-header">Delivery Date</div> 
    <div class="item-data">{{newCart.deliveryDate}}</div> 
</div> 
<div class="col-lg-2 col-md-2"> 
    <div class="item-header">Required Qty.</div> 
    <div class="item-data"> 
     {{increse-required-quantity incresedQuantity=newCart.quantity}} 
    </div> 
</div> 
<div class="col-lg-2 col-md-2"> 
    <div class="item-header">Unit Price</div> 
    <div class="item-data">{{newCart.unitPrice}}</div> 
</div> 
<div class="col-lg-2 col-md-2"> 
    <div class="item-header">Total Price</div> 
    <div class="item-data">{{newCart.partTotalPrice}}</div> 
</div> 
<div class="col-lg-1 col-md-1 button-colum"><button type="button" class="btn btn-danger" {{action "deleteCartRecord" newCart}}>Delete</button>    </div> 
    </div> 
{{/each}} 

我的控制器

import Ember from 'ember'; 
    export default Ember.Controller.extend({ 
    actions:{ 
     deleteRecord(data){ 
      debugger; 
      let confirmation = confirm("are you sure to delete"); 
      if(confirmation) 
      { 
       debugger; 
       data.deleteRecord(); 
       data.save(); 

      } 
     } 
    } 
}); 

模板文件，其中组分是CA大会另作

<hr> 
</div> 

<div class="col-lg-12 col-md-12"> 
    <div class="checkout-summery-wrapper"> 
     <div class="total-label">Total</div> 
     <div class="total">{{model.totalPrice}}</div> 
     <!--<div class="tax-text">(Inclusive of all taxes)</div>--> 
     <div class="place-order-button"><button type="button" class="btn siemens-btn">Place Order</button></div> 
    </div> 
</div> 

<div class="col-lg-12 col-md-12"> 
    {{#if model.orderParts.isGeneric}} 
    <div class="panel panel-default card-list-panel"> 
     <div class="panel-heading-cart col-lg-12 col-md-12"> 
      <div class="col-lg-11 col-md-11 heading">Generic Parts</div> 
      <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div> 
     </div> 
     <div class="panel-body"> 
      {{cart-record model = model}} 
     </div> 
    </div> 
    {{/if}} 
    {{#unless model.orderParts.isGeneric}} 
    <div class="panel panel-default card-list-panel"> 
     <div class="panel-heading-cart col-lg-12 col-md-12"> 
      <div class="col-lg-11 col-md-11 heading">Hot Gas Path</div> 
      <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div> 
     </div> 
     <div class="panel-body"> 
      {{cart-record model = model deleteRecord=(action 'deleteRecord')}} 
     </div> 
    </div> 
    {{/unless}} 
</div> 

MyRoute

import Ember from 'ember'; 

    export default Ember.Route.extend({ 
    model: function() 
    { 
      return this.get('store').queryRecord('cart',{userId:1}) 
    } 

    }); 

我的串行

import DS from 'ember-data'; 

    export default DS.JSONSerializer.extend(DS.EmbeddedRecordsMixin, { 
     primaryKey: 'totalPrice', 

     attrs: { 
     orderParts: 
     { 
      serialize: 'records', 
      deserialize: 'records' 
     } 

    } 

}); 

我有以下问题：

1. 在MyComponent.hbs中，将newCart作为参数传递给删除所有记录还是我要删除的特定记录？
2. 关于为什么不从组件调用MyController的任何想法？
3. 这是删除烬中记录的正确方法吗？

在此先感谢您。

Answer 1

在MyComponent.hbs newCart作为参数传递将删除所有记录或我想要的特定记录？

它将单独删除特定记录。如果你想删除所有记录，那么你可以尝试unloadAll('model-name')

MyController不是从组件调用为什么？

您需要发送动作upcon呼叫组件，{{my-component deleteRecord=(action 'deleteRecords') }}。其实真正的问题是，你打电话给deleteRecord，但在控制器中你得到了deleteRecords。

这是删除烬中记录的正确方法吗？

如果你想删除的时候了，那么你可以使用destroyRecord这将删除和保存记录立即

Answer 2

那么，你的例子是完全错误的......

1. 在MyComponent.hbs，将newCart被作为参数传递删除所有记录或想删除特定的记录？

没有。
首先，你需要了解的是，在你的路线store.query结果返回DS.ManyArray（如对象，这是在你的例子模型数组）包含DS.Model实例组（应在你的例子中是newCart，但你必须先改变为{{#each model as |newCart|}}）。并且只有此DS.Model有方法.save（）和.deleteRecord（）。
您在该按钮上设置的动作是{{action "deleteCartRecord" newCart.partNumber}}，所以您实际上将一个属性称为partNumber以deleteRecord并运行deleteRecord并保存在此属性上。除非这个partNumber是一个DS.belongsTo指向另一个DS.Model，或它根本无法工作。
但你想要的是删除newCart，对不对？

1. 关于为什么不从组件调用MyController的任何想法？

您的调用是正确的。但是由于你的组件充满了bug，它必须在其他地方抛出异常，并且应用程序不能运行。

1. 这是删除烬中记录的正确方法吗？

我想我在第一个问题上的回答够了。