퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. UX 마크업
  4. 종속성 (ux:Dependency)

종속성 (ux:Dependency)

UX 마크업의 ux:Dependency 속성은 생성 가능한 ux:Class를 포함하는 새로운 하드 종속성(Uno 생성자 인수)을 정의합니다.

구문

1
<type ux:Dependency="dependency_name" />

여기서 type은 UX 마크업에서 액세스 할 수 있는 모든 유형이며 depdendency_name은 유효한 Uno 식별자입니다.

비고

컴포넌트(ux:Class로 정의 됨)는 작업 환경에서 특정 객체나 서비스에 대한 액세스가 필요할 수 있습니다. 예를 들어 컴포넌트가 App의 라우터에 액세스해야 할 수 있습니다.

다음과 같이 ux:Dependency 속성을 사용하여 컴포넌트에 종속성을 선언할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Panel ux:Class="MyBackButton">
    <Router ux:Dependency="router" />
    <Panel ux:Dependency="panel" />

    <JavaScript>
        function clicked() {
            router.goBack();
        }

        module.exports = { clicked: clicked };
    <JavaScript>

    <Clicked>
        <Callback Handler="{clicked}">
    </Clicked>

    <WhilePressed>
        <Change panel.Opacity="0.5" Duration="0.3" />
    </WhilePressed>
</Panel>

위의 예는 router와 panel의 종속적 관계를 선언합니다. 컴포넌트를 클릭하면 라우터가 .goBack()에 사용됩니다. 컴포넌트를 누른 상태에서 panel이라고 종속된 패널이 반투명으로 희미해집니다.

종속성은 Uno의 생성자 인수와 동일하며 읽기 전용 필드에 저장됩니다. 이것은 객체의 초기화 시에 항상 생성되며 절대로 변경되지 않기 때문에, 우리는 JavaScript나 애니메이터에서 객체를 해당 이름으로 Change와 같이 안전하게 사용할 수 있음을 의미합니다.

종속성이 있는 컴포넌트를 인스턴스화 할 때 각 종속성(즉, 종속성 주입)에 대해 객체를 제공해야 합니다. 그렇지 않으면 컴파일 시간 오류가 생성됩니다.

1
2
3
4
5
<App>
    <Router ux:Name="router" />
    <Panel ux:Name="p1" />
    <MyBackButton router="router" panel="p1" />
</App>

컴포넌트는 종속성에 대한 기본값을 설정할 수 없습니다.

종속성 상속하기

하위 클래스를 만들 때 종속성은 전달되지 않습니다. 따라서 서브 클래싱하는 수퍼 클래스에 수동으로 전달해야 합니다.

1
2
3
4
5
6
<Page ux:Class="A">
    <Router ux:Dependency="router" />
</Page>
<A ux:Class="B">
    <Router ux:Dependency="router" ux:Binding="router" />
</A>

ux:Property와 ux:Dependency의 차이점은 무엇입니까?

종속성(Dependency)은 속성(Property)과 비슷하게 작동하지만 몇 가지 주요한 차이점이 있습니다.

  • 종속성은 immutable(변하지 않는) 타입이므로, 시간이 지남에 따라 값이 변하지 않습니다.
  • 종속성에는 할 때스화 할 때 값이 제공되어야 합니다.
  • 종속성은 기본값을 가질 수 없습니다.
  • 종속성은 Observables가 아닌 태그에서 직접 로컬 명명된 객체로 사용할 수 있습니다.
  • 종속성은 클래스의 범위에서 로컬 이름으로 사용할 수 있습니다. 즉, {Property foo}와 같은 바인딩을 사용하여 액세스하지 않아도 되므로 foo를 사용하면 됩니다.
Was this article helpful to you? Yes No

How can we help?