为嵌套在 ember 组件中的输入修改 class 的最佳方法是什么？

Question

所以我有一个简单的 ember 组件，看起来像这样

<div class="my-wrapper">
  {{input value=password type="password" class="text-input"}}
</div>

组件本身非常简单 - 就像这样

import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement: function() {
        //do stuff here
    }
});

而不是像上面那样 "hard coding" 文本输入 class ...当我在我的 ember 应用程序中使用该组件时，我怎样才能代替 "pass this in" ？

Answer 1

您传递给组件的任何参数都会成为组件的属性，可用于组件的模板。

所以，你可以做到

<script type="text/x-handlebars">
  {{ custom-input textClass="text-input"}}
</script>

现在，textClass 可用于您的组件，因此您可以

<script type="text/x-handlebars" id="components/custom-input">
  <div class="my-wrapper">
    {{ input value=password type="password" class=textClass }}
  </div>
</script>

工作示例here

为嵌套在 ember 组件中的输入修改 class 的最佳方法是什么？

What is the best way to modify the class for an input nested inside an ember component?

ember.js