Question

我有一个<draftable-input>组件正在开始增长。它有四种不同的“类型”：text，textarea，slider，wysiwyg。这是继承的教科书案例。

核心功能 - 让用户将输入编辑为“草稿”，然后保存或放弃他们的更改 - 在所有四种类型中都很常见。唯一的区别是模板的一部分。

目前我这样使用它：

{{#draftable-input
  type='wysiwyg'
  ...}}

{{#draftable-input
  type='textarea'
  ...}}

等等。组件本身约为100行。我根据type执行不同的CPS和方法：

isWysiwyg: Ember.computed.equal('type', 'wysiwyg'),
isSlider: Ember.computed.equal('type', 'slider'),
isTextarea: Ember.computed.equal('type', 'textarea'),
isText: Ember.computed.equal('type', undefined),

selector: function() {
  var selector;
  switch (this.get('type')) {
    case 'wysiwyg':
      selector = '.redactor-editor';
      break;
    case 'textarea':
      selector = 'textarea';
      break;
    default:
      selector = 'input'
      break;
  }

  return selector;
}.property('type'),

其他~85行是通用的。

模板大约是60行，其中大约一半是这样的：

{{#if isWysiwyg}}
  {{redactor-input value=copy
    buttons=buttons
    placeholder=placeholder
    escape-press='cancel'
    errorMessage=errorMessage}}
{{/if}}

{{#if isText}}
  {{input value=copy
    class='form-control'
    placeholder=placeholder
    escape-press='cancel'}}
{{/if}}

而另一半是通用的。

所以，我的蜘蛛般的感觉正在刺痛，将其重构为四个独立的组成部分。一个抽象的DraftableBase，以及四个专业。这对我的JS代码非常有用 - 我可以删除打开类型的代码，每个子类只需要指定它的选择器：

export default DraftableBase.extend({
  selector: '.redactor-editor'
});

问题是，模板。如何在每个子类中共享30行？据我所知，没有办法像子类一样做“模板继承”。所以，我不知道该怎么做。如果我是子类，我会删除所有荒谬的类型切换代码，但后来我会复制很多Handlebars。

连连呢？谢谢！

Answer 1

没有像模板继承这样的东西，但你可以使用partials重构你的代码。您需要动态生成部分名称

App.MyComponentComponent = Ember.Component.extend({
  partialName: function() {
    return 'my-component-partial/' + this.get('type');
  }.property('type')
});

模板中每个类型的每个地方

<script type="text/x-handlebars" data-template-name="index">
       {{my-component type="textarea"}}
       <hr />
       {{my-component type="input"}}
   </script>
   <script type="text/x-handlebars" data-template-name="components/my-component">
       common things
       {{partial partialName}}
       common things
   </script>

   <script type="text/x-handlebars" data-template-name="my-component-partial/textarea">
      <p>text area here</p>
   </script>
  <script type="text/x-handlebars" data-template-name="my-component-partial/input">
      <p>input here</p>
   </script>

演示：http://jsbin.com/gijecukuxu/1/

当然，您也可以创建基本和子视图。

在Ember中是否可以使用模板继承？

1 个答案: