Question

所以我按照说明进行操作 http://ember.guru/2014/master-your-modals-in-ember-js 创建一个可重用的模态。我正在尝试制作一个可扩展的模态，用于在gui周围的各个地方进行简单的编辑。

在application.js中我有

showModal: function(name, model) {
  this.render(name, {
    into: 'application',
    outlet: 'modal',
    model: model
  });
}

在模板中，我从传递联系人的链接中调用此操作：

<a class="contact-edit" {{action 'showModal' 'contact-edit' contact}}>Edit contact</a>

接触edit.hbs：

{{#my-modal objectEditing=model as |theObject|}}
  <input type="text" name="phone" value="{{theObject.phone}}">
{{/my-modal}}

MY-modal.hbs：

<div class="modal-body">
  {{yield objectEditing}}
</div>

MY-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    save: function () {
      this.$('.modal').modal('hide');
      this.sendAction('save', this.get('objectEditing'));
    },
  },
  show: function () {
    this.$('.modal').modal().on('hidden.bs.modal', function () {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});

问题是对行<input type="text" name="phone" value="{{theObject.phone}}">中的对象的编辑没有显示在此处调用的动作中（在路径上）。我做错了什么？

Answer 1

在您的输入中，您应该传递一个更新您的值的操作。该值不会自动更新：

{{#my-modal objectEditing=model as |theObject|}}
  <input
    type="text"
    name="phone"
    value={{theObject.phone}}
    oninput={{action (mut theObject.phone) value="target.value"}}
  >
{{/my-modal}}

请注意，上面的value属性未被双引号括起来。：）

组件和yield块中的相同对象

1 个答案: