Question

我在Ember世界有点新。

在使用庞大的未知组件库时，我很难跟踪它们接受的参数。

让我们举一个假的例子：

模板视图A

{{component-article
    title="article.title"
    preview="article.preview"
    image="article.imgUrl"
    content="article.content"}}

模板视图B

{{component-article
    title="article.title"
    content="article.content"}}

我们看到，有两个模板正在使用我的 component-article 组件。

我想使用此组件时遇到问题。 我怎么知道我的**组件文章所暴露的属性？**

如果我是该项目的新手，则从未见过或使用 component-article ，我不知道接受什么属性。实际上，我需要深入研究模板，在项目中进行查找，并查看其他模板如何调用它。

有什么方法可以在 component-article.js 文件中显式设置Im允许输入哪些属性？

positionalParams 属性似乎几乎可以达到此目的，但实际上并非如此。

组件中是否有任何属性可以让我明确设置组件可以接受哪些参数？有约定吗？

示例：

export default Component.extend({
  layout,
  acceptProperties: ['title', 'content', 'preview', 'image']
});

Answer 1

我为此感到痛苦。最近已经完成了一些工作，以支持组件的命名参数，这有助于消除在3.1中合并的模板中来自许多其他来源的传递参数的歧义。您可以在此处查看rfc的基本原理。有关更详尽的说明，请参见此blog post。

简而言之，您可以通过以下方式访问传递的参数：{{@arg}}，这样您就可以在模板中知道已将其传递给组件。

这有帮助，但还不完整。我发现，在一个易于理解的组件中，约定是在组件文件顶部包含所有带有标题注释的参数。可以在ember-power-select（一个流行的select插件）中看到这样的示例：

  // Options
  searchEnabled: fallbackIfUndefined(true),
  matchTriggerWidth: fallbackIfUndefined(true),
  preventScroll: fallbackIfUndefined(false),
  matcher: fallbackIfUndefined(defaultMatcher),
  loadingMessage: fallbackIfUndefined('Loading options...'),
  noMatchesMessage: fallbackIfUndefined('No results found'),
  searchMessage: fallbackIfUndefined('Type to search'),
  closeOnSelect: fallbackIfUndefined(true),
  defaultHighlighted: fallbackIfUndefined(defaultHighlighted),
  typeAheadMatcher: fallbackIfUndefined(defaultTypeAheadMatcher),
  highlightOnHover: fallbackIfUndefined(true)
  .....

其中fallbackIfUndefined是一个计算宏：

import { computed } from '@ember/object';

export default function computedFallbackIfUndefined(fallback) {
  return computed({
    get() {
      return fallback;
    },
    set(_, v) {
      return v === undefined ? fallback : v;
    }
  });
}

这是您团队遵循的良好惯例。

通常，我建议首先确定组件是在内部创建的还是社区创建的插件。如果是后者，那么最受欢迎的工具包会在其源代码中提供文档并遵循良好的约定。您可以通过在components目录中查找该组件来确定它是否在内部（假设使用非Pod布局）。

如果是在内部创建的，那么您或多或少地处在正确的轨道上。如果您的团队编写测试，那应该是组件功能的绝佳仓库！这种方法是快速了解IMO各个领域的项目的秘诀。

不过，我不确定为什么您需要理解“所有”选项。当我使用其他团队成员创建的组件时，我会用正则表达式在模板中搜索它们的用法，并将这个特定的UI / UX（实际上是通过在浏览器中查看）与我需要实现的行为进行比较。您仅需要在需要与应用程序中现有行为不同的行为时进行挖掘。它可以帮助您更加熟悉该产品，以便您更好地了解可用的产品：）

Answer 2

在这个用例中，我喜欢使用ember-prop-types插件。这样，您可以查看可用属性，组件接受的每个属性的类型，还可以设置默认值。

这是它可以做什么的一个小例子：

import { Component } from '@ember/component';
import { PropTypes } from 'ember-prop-types';

export default Component.extend({
  // Defines the properties for the component
  propTypes: {
    // Must be a 'string'
    name: PropTypes.string,
    // Must be a 'number' and it's required
    age: PropTypes.number.isRequired,
    // Must be one of the values in the array
    favoriteColor: PropTypes.oneOf(['red', 'blue', 'green'])
  },

  // Defines the default values for the properties if not passed in
  getDefaultProps () {
    return {
      name: 'New User',
      age: 99
    }
  }
});

Ember组件-组件中参数的显式声明

2 个答案: