전환 비용을 줄이는 한 가지 방법은 애드온이 구성 요소 호출자가 전달한 정적 문자열에 해당하는 인수를 정적으로 표시하도록 허용하는 것입니다.

스핏볼로 ( better-component 는 정적 구성 요소 키워드의 이름에 대한 자리 표시 자입니다).

{{better-component <strong i="8">@arg</strong> staticString=true}}

이렇게하면 애드온이 특정 "동적 호출"이 호출자 가 정적 문자열을 제공하는 경우에만 작동 함을 나타낼 수 있습니다.

많은 동적 구성 요소 사례가 실제로 "애드온에 전달 된 문자열 인수"로 인해 발생하는 경우에만이 작업을 수행해야합니다.

이것이이 문제에 대한 주제라면 Idk이지만, 나는 주기적으로 emberclear에 대한 완전한 정체성을 파악하려고 노력하고 있으며 문제와 해결책에 대한 문서 추적을 유지해 왔습니다.

https://github.com/NullVoxPopuli/emberclear/pull/784

그렇다면 사람들이 문제에 부딪히면 Abe 문서가 도움이 될 수 있습니까? Idk

또한 자수에 매우 흥분하고 있으며, 완전한 정적이 달성되면 이미 큰 계획을 가지고 있습니다.
https://github.com/emberjs/rfcs/issues/611

우리의 응용 프로그램은 동적 콘텐츠 전달 시스템입니다. 콘텐츠 제작자는 "활동 요소"에서 콘텐츠를 조립합니다. 각 요소에는 해당하는 Ember 구성 요소가 있으며 그 이름은 Ember 데이터 모델에 정의되어 있습니다. 이 시스템의 핵심은 다음과 같습니다.

// example model definition
export default class TextElement extends Model {
  _componentName = 'text-element';
}

  {{#each (sort-by "position" @activityElements) as |activityElement|}}
    {{component (get activityElement "_componentName")}}

위 내용을 읽었을 때 이것이 (component dynamicString) 시나리오임을 시사합니다. 정확합니까?

위의 내용을 읽었을 때 이것이 (구성 요소 dynamicString) 시나리오임을 시사합니다. 정확합니까?

@activityElements 은 무엇이며 어디에 정의되어 있습니까?

이것은 컨트롤러 구성 요소에 전달 된 Ember 데이터 모델 인스턴스의 배열입니다.

또한 동적 구성 요소 FYI에 약간의 투자를했습니다. 작년에 https://discuss.emberjs.com/t/the-perils-of-dynamic-component-invocation/16784 에서 여기에 대해 물었습니다

우리도 그래. 우리는 말 그대로 앱에서 사용할 구성 요소를 미리 알지 못합니다. 데이터베이스에 저장되어 (물론 변경 가능하게 함) 백엔드에서 컴파일되고 요청시 프런트 엔드로 전송됩니다. 우리를 위해 동적 component 도우미를 사용할 수 없다는 것은 배열에 대해 for-each를 수행 할 수없는 것과 같습니다. 나는 정말로 이와 같은 사용 사례에 대해 앞으로 나아갈 방법이 있기를 바랍니다. 필요한 역 동성이 없기 때문에 내 앱이 작동하지 않으면 코드 분할 / 트리 흔들림에 대해 확실히 신경 쓰지 않을 것입니다.

해당 시나리오에 유효한 모든 구성 요소의 맵을 사용할 수 있습니까?

예를 들면 :

{{#let (hash
   Foo=(import 'path/to/foo')
   Etc=...
) as |validComponents|
}}
  {{component (get validComponents @someDynamicValue)}}
{{/let}}

?

마찬가지로, 앱에있는 항목 만 렌더링 할 수 있기 때문에 전체 동적 구성 요소를 가질 수 없습니다. 렌더링 할 항목을 선택하는 목록을 만드는 것도 디버깅에도 도움이됩니다. "아,이 값은 유효한 구성 요소 중 하나가 아닙니다."

해당 시나리오에 유효한 모든 구성 요소의 맵을 사용할 수 있습니까?

이것은 확실히 우리의 사용 사례를 다룰 것입니다.

트윗 담아 가기

일반적으로 사람들이 (component dynamicString) 대신해야 할 일에 대해 생각하는 방법은 어딘가 로 가려면 import 또는 (component "staticString") 가 필요하다는 것입니다.

옵션은 다음과 같습니다.

• 구성 요소의 호출자는 (component "staticString")
• 역 동성이있는 코드는 가능성을 열거하고지도에 넣고 (get componentMap dynamicString) 를 사용하여

이제 생각할 수 있습니다. (get components dynamicString) 가 (component dynamicString) 보다 더 나을 수있는 방법은 무엇입니까? 대답은 componentMap 어딘가에 빌드해야하고 규칙이 재귀 적으로 적용된다는 것입니다.

<InputField @type="text" /> 또는 <InputField @type="checkbox" /> (예 <input> HTML에서

input-field 대한 템플릿은 다음과 같습니다.

{{#let (hash text=(component "inputs/text-field") checkbox=(component "inputs/checkbox")) as |components|}}
  {{component (get components @type)}}
{{/let}}

이런 식으로 코드를 작성하면 Embroider는 번들에 두 개의 구성 요소 만 포함하면된다는 것을 알 수 있습니다. 다음과 같이 작성 했습니까?

{{component (concat "inputs/" <strong i="33">@type</strong> "-field")}}

(예, 그런 것들은 놀랍게도 일반적입니다)

Embroider는 코드를 쉽게 분석하고 번들에 포함될 구성 요소를 제한 할 수 없습니다. 당신은 (또한 매우 일반적이다) 자바 스크립트에서 일을 한 경우에 더 악화입니다 :

export default class extends Component {
  get innerComponent() {
    return `inputs/${this.args.type}-field`;
  }
}

이 템플릿으로 :

{{component this.innerComponent}}

약간의 조정이지만 Embroider가 실제로 사용되는 구성 요소를 결정할 수 있습니다.

또한 다른 두 가지 기내 기능에 대한 연결을 더 자세히 설명하고 싶습니다.

1. 템플릿 가져 오기
2. 컴포넌트 클래스를 호출 가능 항목으로 사용

이 두 기능을 사용하여 이전 예제를 다시 작성하면 다음과 같습니다.

---
import TextField from "./text-field";
import Checkbox from "./checkbox";
---
{{#let (hash text=TextField checkbox=Checkbox) as |components|}}
  {{component (get components @type)}}
{{/let}}

이것은 Embroider가 이해해야 할 특별한 규칙을 제거하고 모듈에 대한 코드 분할을위한 사용자 모델을 만드는 좋은 속성을 가지고 있습니다.

컴포넌트 클래스를 호출 가능 항목으로 사용

RFC # 481 이후로 구성 요소 클래스는 Glimmer VM이 구성 요소로 호출하는 데 필요한 모든 정보를 포함하는 완전한 독립된 단위였습니다.

참고 : 이는 @ember/component 또는 @glimmer/component 에서 상속 된 클래스에만 해당되는 것은 아닙니다. RFC 481 이후 Ember의 "구성 요소"정의는 "템플릿 및 구성 요소 관리자와 관련된 개체"이며 후크 구성 요소와 같은 사용자 지정 구성 요소를 포함

RFC # 432 (문맥 도우미 및 수정 자) 및 RFC # 496 (핸들 바 엄격 모드) 이후 Ember 템플릿 구문의 미래를위한 설계는 다음과 같습니다. 도우미, 구성 요소 또는 수정자를 포함하는 표현식을 도우미, 구성 요소 또는 수정 자로 호출 할 수 있습니다.

승인 된 RFC는 현재 컬렉션의 의미는이다 <SomeComponentClass /> (또는 <this.componentClass> 경우 this.componentClass 구성 요소 클래스로 확인) "단지 작품"것. 구현 작업에 대한 기록 계획이기도합니다.

즉, 명확성을 위해이 동작을 명시 적으로 지정하는 새 RFC를 만들어야합니다.

HBS에서 유효한 구성 요소 목록을 어딘가에 지정하는 것은 가능하지만 다음과 같은 몇 가지주의 사항이 있습니다.

1. 현재 우리는 @wycats가 지적한 JS 솔루션을 사용합니다. HBS 공급자에서 동일한 작업을 수행하는 것은 가능하지만 우리 모두가 알고 있듯이 HBS의 논리는 조금 더 어렵습니다. 또한 공급자 구성 요소가 올바른 문자열을 반환하는 util 함수보다 올바른 구성 요소를 산출하는지 단위 테스트가 더 어렵습니다.

2. 이것은 JS (어쨌든 공개 API 포함) afaik에는 존재하지 않지만 여기서는 디렉토리 구조를 이점으로 사용하는 것이 매우 좋습니다. 예 :

   {{#let (lookup-directory "components/inputs/") as |components|}}
   {{/let}}
   

   이런 종류의 것은 디렉토리 구조별로 그룹화 된 다형성 유형을 알고 있다면 시간이 지남에 따라 유지 관리가 더 쉬워 질 수 있습니다.

어쨌든 나는 동적 구성 요소 가이 문제를 대신하기보다는 논의하기 위해 자체 문제가 필요하다고 생각합니다 🙈 😄

어쨌든 나는 동적 구성 요소 가이 문제를 대신하기보다는 논의하기 위해 자체 문제가 필요하다고 생각합니다 🙈 😄

동의하며 RFC 리포지토리에서 곧 하나를 열고 여기에 링크를 게시합니다.

@mehulkar @wycats @jherdman 사용자가 동적으로 호출 가능한 구성 요소 목록을 가져올 수 있도록 허용하는 것은 어떻습니까? 추가 수준의 간접 참조를 포함하는 도우미보다 따라 가기가 훨씬 쉽습니다.

import Component1 from './dynamic/component-1';
import Component2 from './dynamic/component-2';
import Component3 from './dynamic/component-3';

export default class extends Component {
  get innerComponent() {
    switch(this.args.type) {
      case 'one':
        return Component1;
      case 'two':
        return Component2;
      case 'three':
        return Component3;
      default:
        // handle invalid type
    }
  }
}

그런 다음 템플릿은 {{#let (component this.innerComponent) as |DynamicComponent|}} 또는 이와 유사한 작업을 수행 할 수 있습니다.

더 쉽게 검색 / 읽기 / 분석하고 이러한 구성 요소가 사용되는 위치를 쉽게 감지하는 이와 같은 것을 선호합니다. 생각?

@ Samsinite 네, 그게 아이디어라고 생각합니다. HBS의 도우미는 대부분 구문 설탕이며 템플릿 전용 구성 요소에 유용합니다.

@Samsinite 는 기본적으로 단기 수정으로 제안한 것입니다 (템플릿 가져 오기 전).

컴포넌트 클래스 가 호출 가능하도록 허용해야하는데, 이것이 제가이 주석 에서 이야기 한 것입니다.

가자!

아, 템플릿 전용 구성 요소에는 의미가 있습니다. 오해해서 죄송합니다. :). 또한 다음의 템플릿 전용 구성 요소에 대한 구문을 좋아합니다.

---
import TextField from "./text-field";
import Checkbox from "./checkbox";
---
{{#let (hash text=TextField checkbox=Checkbox) as |components|}}
  {{component (get components @type)}}
{{/let}}

사실, 나는 팀의 다른 사람들이 더 쉽게 읽을 수 있다고 생각하는 것에 따라 템플릿과 js 지원 구성 요소에만 사용할 것입니다.