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

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 文件中明确设置我允许哪些属性进入？

positionalParams 属性似乎几乎可以达到这个目的，但实际上并没有。

组件中是否有任何属性允许我明确设置组件接受哪些参数？有什么约定吗？

示例：

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

Answer 1

我感受到了你的痛苦。最近做了一些工作来支持组件的命名参数，这有助于消除模板中许多其他来源传递的参数的歧义，这些模板合并到 3.1. You can see the rfc here for the rationale. See this blog post 中以获得更详尽的解释。

简而言之，您可以访问传递的参数为：{{@arg}}，这样您就可以在模板中知道这是传递给组件的。

这有帮助，但还不够完整。我发现可理解的组件中的约定是在组件文件顶部包含所有参数，并带有 header 注释。这样的例子可以在 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 目录来确定它是否在内部（假设非 pods 布局）。

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

不过，我不确定您为什么需要了解 "all" 选项。当我使用其他团队成员创建的组件时，我会使用正则表达式在模板中搜索它们的用法，并将这个特定的 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 component - 组件中参数的显式声明

Ember component - Explicit declaration of parameters in the component

ember.js