Question

我们正在开发的应用程序中的视图已经在Handlebars / Emblem中编写，数据已经从模型中获取。

我正在试图弄清楚在Ember中内联/现场的最佳方法是什么。问题：当没有点击任何内容时，数据只是一个文本。当您根据文本类型（日期，纯文本，项目列表）单击文本时，相应的输入字段（日期字段，文本字段或选择）将被替换，您可以对其进行编辑。

您是否有过处理此问题的经历？如果是这样，请分享您的想法！

Answer 1

以下是使用Ember.Component的一种解决方案：

App.InlineEditComponent = Ember.Component.extend({
  actions: {
    toggleEditing: function() {
      this.toggleProperty('isEditing');
    } 
  }
});

使用模板：

<script type="text/x-handlebars" id="components/inline-edit">
  {{#if isEditing}}
    <form {{action "toggleEditing" on="submit"}}>
      {{yield}}
    </form>
  {{else}}
    <span {{action "toggleEditing"}}>
      {{value}}
    </span>
  {{/if}}
</script>

用法：

<script type="text/x-handlebars"  data-template-name="index">
  {{#inline-edit value=someProperty}}
    {{input value=someProperty type="date"}}
  {{/inline-edit}}
</script>

演示：http://emberjs.jsbin.com/OGEnOdA/2/edit

您可以添加更多功能（例如，在对焦表格元素时结束编辑等），但我认为您已经掌握了基本想法。

在Ember中为不同的表单输入进行内联/就地编辑

1 个答案:

用法：