组件和屈服块中的对象相同

Same object in component and yield block

本文关键字：对象 屈服 组件      更新时间：2023-09-26

所以我按照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>

contact-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}}">行中Object的编辑没有显示在此处调用的操作中（在路由上）。我做错了什么？

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

{{#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属性没有用双引号括起来。：）

相关文章：