ember.js - Ember 中不同表单输入的内联/就地编辑

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

您可以添加更多功能（例如，结束对表单元素的焦点编辑等），但我认为您了解基本概念。