VM에서 '컨테이너 없음'을 사용하는 경우와 사용자 정의 요소에서 HTML보기에서 '컨테이너 없음'을 사용하는 경우의 차이점

Question

아우렐 리아 구성 요소에 컨테이너없는 기능을 사용할 때 이상한 동작이 나타납니다. 우리는 SVG 컨테이너에 사용자 정의 요소를 작성했습니다. SVG 컨테이너 내에서만 SVGElements 태그가 허용되므로 컨테이너에없는 태그를 사용하여 사용자 정의 요소 태그를 DOM에 추가하기 전에 제거해야했습니다. 우리는 Aurelia 릴리스 버전 1.0.0을 사용 중이며 webpack으로 SPA를 구축하고 있습니다.

여기 컨테이너없는 사용의 2 구현을 보여주는 gistrun 예제를 찾을 수 있습니다. https://gist.run/?id=58ba6282ad54c1263eec3a141fe42183

이 예제에서는 2 개의 뷰 모델을 만들고이를 사용자 정의 요소에 바인딩합니다. as-element="compose"을 사용하여 aurelia에게 내가 viewmodel을 만들고 Aurelia가 VM을 생성해서는 안된다고 말하십시오. 뷰 모델에서 @containerless 태그가 있지만, HTML보기에서 '컨테이너가'를 나던

1. CustomElement : 사용자 지정 요소에 이러한 차이는 컨테이너가 태그입니다.

2. withattr 구성 요소는 HTML보기에서 'containerless'가 아니지만 Aurelia HUB에 설명 된대로 Viewmodel에 @containerless 태그가 있습니다.

두 상황 모두에서 파란색 직사각형이 표시 될 것으로 예상됩니다. customelement 태그는 컨테이너가없는 태그 때문에 Aurelia에서 제거됩니다. 그러나 @containerless 태그 나던 구현으로, 작동하는 것 같다 2.

질문 : 이러한 구현은 서로 다른 출력을 왜 어떤 단서? 올바른 것은 무엇입니까? Aurelia Docs에 명시된 바와 같이 @containerless 태그를 viewmodel에 배치해야한다고 2시를 기대합니다.

어떤 도움을 주시면 감사하겠습니다 :)

이

Answer 1

@containerless 장식은 당신이 그것을에 배치 요소에 직접적으로 작동합니다.

장식자는 사용자의 withattr 요소에 적용되지만 as-element="compose"은 후드 아래 compose 요소로 바뀝니다. 이 compose 요소에는 @containerless 태그가 적용되지 않습니다.

마찬가지로 customelement을 사용하면 customelement에 실제로 @containerless을 적용하지 않고 customelement에 적용하면 compose이됩니다.

는 as-element="compose" 부분을 제거하고 단순히 마크 업에 <withattr/> 요소가 알몸으로 선언하고 실제 요소가 여전히 withattr 될 것입니다 때문에 containerless 작동합니다.

요소 내부에 맞춤 요소를 사용하는 경우와 같이 다른 방법이없는 한 @containerless을 as-element과 함께 사용하지 않는 것이 좋습니다.

사용자 정의 요소 내에 compose가 있고 사용자 정의 요소의 바인딩 가능한 속성을 통해보기에 경로를 바인딩하지 않는 이유는 무엇입니까?

편집

죄송합니다, 나는 종류의 당신이 당신의 자신의 ViewModel 인스턴스를 지정하고 싶었다는 사실을 간과.

이 요구 사항은 compose 요소를 사용하는 것으로 제한합니다. 왜냐하면 이것이 Aurelia가 자신의 ViewModel 인스턴스를 제공하는 것을 지원하기 때문입니다.

@containerless도 필요합니다. 그리고 @containerless이 compose 요소에 있어야합니다.

결론적으로 말하면, 첫 번째 솔루션은 기술적 인 관점에서 보면 완벽하게 괜찮은 것 같습니다.

개인적인 취향의 문제로서, 나는 이런 짓을 했을까 :

<compose containerless view.bind="'./customelement.html'" view-model.bind="customElementViewModel"/>

을 대신 이것 :

<customelement containerless as-element="compose" view-model.bind="customElementViewModel"/>

동적 전망을 좀 더 유연하게, 그것을 만들 우리가 compose을 사용하고 있으며,보기가 <require> 일 필요가 없다는 것을 분명히합니다. 그러나 그것은 정말 선호도와 다른 요구 사항에 달려 있습니다.