在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

您可以添加更多功能(例如,在焦点输出表单元素时结束编辑等),但我认为您可以获得基本的想法.