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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 스크립팅과 데이터

스크립팅과 데이터

스크립팅 & 데이터 바인딩

UX 마크업의 태그는 포함된 범위의 각 인스턴스에 대한 인스턴스화되는 모듈을 만듭니다.

퓨즈는 CommonJS 모듈 시스템을 구현합니다. 즉, 변수를 module.exports 객체에 첨부하여 변수를 외부로 내보낼 수 있습니다.

그런 다음 데이터 바인딩은 중괄호 구문인 Property=”{variable}”을 사용하여 수행됩니다.

앱-전역 스크립트

태그를 사용하여(예: 태그에서 직접 응용 프로그램 전역 모듈을 만들 때) 태그를 UX 마크업에 인라인으로 배치할 수 있습니다:

<App>
    <JavaScript>
        module.exports.foo = "bar";
    </JavaScript>
    <Panel>
        <Text Value="{foo}"/>
    </Panel>
</App>

코드가 UX 마크업에서 인라인일 필요는 없습니다. 별도의 파일에 넣고 이름으로 참조할 수 있습니다. 이것은 동일한 효과가 있습니다:

<App>
    <JavaScript File="Main.js"/>
    <Panel>
        <Text Value="{foo}"/>
    </Panel>
</App>

컴포넌트-로컬 스크립트

또한 태그를 ux:Class 내에 배치할 수 있습니다. 그러면 클래스의 각 인스턴스에 대한 모듈을 평가하여 컴포넌트 로컬 상태와 데이터를 제공합니다.

<Panel ux:Class="MyComponent">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var foo = Observable(10);
        module.exports = { foo }
    </JavaScript>

    <Text Value="{foo}" />
</Panel>

‘foo’ 변수는 이제 MyComponent 인스턴스와 아래쪽의 데이터 바인딩을 위해 존재합니다.

퓨즈의 JavaScript에 대한 중요한 참고 사항

퓨즈의 비즈니스 로직은 JavaScript나 Babel이나 TypeScript와 같은 외부 변환기를 사용하여 JavaScript로 컴파일되는 언어로 작성될 수 있습니다.

퓨즈는 마크업과 자바스크립트를 사용하더라도 웹 또는 브라우저 기반 플랫폼이 아니라는 점을 설명하는 것이 중요합니다. 퓨즈가 데이터 바인딩, 레이아웃 및 애니메이션을 처리하는 방법은 모두 퓨즈 플랫폼에 맞게 조정됩니다. process와 fs 같은 모듈에 의존하는 Node.js 라이브러리가 웹 페이지에서 작동하지 않을 것이라고 생각하는 것과 마찬가지로 퓨즈의 JS 접근 방식은 동일합니다.

즉, 일반적인 DOM 기반 JS 프레임워크가 아닌 새로운 것으로 퓨즈에 접근하면 더 큰 성공을 거둘 수 있습니다. (더 재밌습니다!). 🙂

데이터 바인딩 예제

중괄호 구문은 바인딩 패스와 일치하는 데이터 컨텍스트에서 가장 근접한 개체에 바인딩합니다.

<App>
    <JavaScript>
        var hello = "world";

        function writeHello(){
            console.log("hello " + hello);
        }

        module.exports = {
            hello : hello,
            writeHello : writeHello
        };
    </JavaScript>
    <Panel>
        <Text Value="{hello}" Clicked="{writeHello}"/>
    </Panel>
</App>

배열에 대한 데이터 바인딩

Each 비헤이비어를 사용하여 배열에 데이터 바인딩 할 수 있습니다:

<App>
    <JavaScript>
        var colors = ["#f00", "#0f0", "#00f"];

        module.exports = {
            colors: colors
        };
        </JavaScript>
    <StackPanel>
        <Each Items="{colors}">
            <Rectangle Color="{}" Height="40"/>
        </Each>
    </StackPanel>
</App>

Each 비헤이비어는 바운딩 배열의 각 아이템에 대해 한 번씩 자식을 인스턴스화 합니다. 그런 다음 이 항목은 해당 인스턴스의 데이터 컨텍스트가 되어 비어있는 중괄호 {} 세트로 색상 값에 데이터 바인딩 할 수 있습니다.

UI가 변화에 반응하게 하기

대부분의 경우 앱의 수명주기 동안 변경되는 동적 데이터를 표시하려고 합니다. 이는 Observable에 데이터를 저장함으로써 간단히 수행됩니다. Observable은 퓨즈 반응형 데이터 바인딩 시스템의 핵심 부분이며 퓨즈 앱의 모든 곳에서 사용됩니다.

Observable은 단일 값 또는 값 목록과 같은 역할을 합니다. 모든 데이터 바인딩 Observable은 값이 변경되면 자동으로 뷰를 업데이트 합니다:

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var count = Observable(0);
        function increment(){
            count.value = count.value + 1;
        };
        module.exports = {
            count : count,
            increment : increment
        };
    </JavaScript>
    <StackPanel>
        <Text Value="{count}"/>
        <Button Text="increment" Clicked="{increment}"/>
    </StackPanel>
</App>

리스트 변경

add 메소드를 사용하여 Observable에 아이템을 추가할 수도 있습니다:

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var numbers = Observable(0);
        function increment(){
            numbers.add(numbers.length);
        };
        module.exports = {
            numbers : numbers,
            increment : increment
        };
    </JavaScript>
    <DockPanel>
        <Button Text="increment" Clicked="{increment}" Dock="Top"/>
        <StackPanel>
            <Each Items="{numbers}">
                <Text Value="{}"/>
            </Each>
        </StackPanel>
    </DockPanel>
</App>

Each 비헤이비어는 데이터 바인딩 Observable의 내용이 변경되면 자체적으로 업데이트 됩니다.

[[ 동영상 강좌 ]]

Was this article helpful to you? Yes No

How can we help?