Question

我的click-editable组件如：

模板：

{{#if isEdit}}
  <div class="input-group">
    {{input type="text" value=editValue class="form-control"}}
    <div class="input-group-btn">
      <button type="button" class="btn no-margin-btn btn-info" {{action "updateValue"}}>{{fa-icon 'check'}}</button>
    </div>
  </div>
{{else}}
  ....
{{/if}}

和

export default Ember.Component.extend({
  tagName: "",
  isEdit: false,
  canEdit: true,
  category: 'input',
  editValue: Ember.computed.oneWay('value'),

  actions:{
    updateValue() {
      this.sendAction('onUpdate', this.get('valueModel'), this.get('valueColumn'), this.get('editValue'), this.get('isEdit'));
    }
  }
});

在我的模板中使用：

{{#each model.quotationWorkItems as |quotationWorkItem index|}}
  {{click-editable valueModel=quotationWorkItem valueColumn='name' value=quotationWorkItem.name onUpdate=(action "updateInput")}}
{{/each}}

在控制器中：

import Ember from 'ember';

export default Ember.Controller.extend({
  ....

  actions: {
    updateInput(updateModel, updateColumn, value, isEdit) {
      updateModel.set(updateColumn, value);
      updateModel.save().then(()=> {
        this.get('model').reload();
        this.set('isEdit', false);
      }, ()=> {
        alert('wrong');
      });
    }
  }
})

路线：

import Ember from 'ember';

export default Ember.Route.extend({
  ...

  model(params) {
    return this.store.find('quotation', params.quotation_id);
  },

  setupController(controller, model) {
    controller.set('model', model);
    ...
  }
})

报价模型：

import DS from 'ember-data';

export default DS.Model.extend({
  quotationStocks: DS.hasMany('quotationStock'),
  quotationWorkItems: DS.hasMany('quotationWorkItem'),
  ...
});

QuotationWorkItem模型：

import DS from 'ember-data';

export default DS.Model.extend({
  transactionType: DS.belongsTo('transactionType'),
  quotation: DS.belongsTo('quotation'),

  ...
});

此代码可以更新模型值，但问题isEdit是组件值。当isEdit发送到控制器并设置另一个值时，它无法工作。所以我认为不能改变ember控制器中的组件值？

this.set('isEdit', false);

代码无法在控制器中运行。我正在使用Ember 2.4.0。

Answer 1

您需要将控制器的isEdit属性绑定到组件isEdit属性。

{{click-editable isEdit=isEdit valueModel=quotationWorkItem valueColumn='name' value=quotationWorkItem.name onUpdate=(action "updateInput")}}

这将覆盖组件中的isEdit属性（数据向下）。

如何使用ember更新控制器或路由中的组件值？

1 个答案: