☰

신호를 JavaScript 메소드에 연결하는 올바른 방법은 무엇입니까?

tag-icon • tag-icon ubuntu-touch qml javascript
신호를 JavaScript 메소드에 연결하는 올바른 방법은 무엇입니까?

Ubuntu 전화 애플리케이션에서는 이벤트가 발생할 때 몇 가지 논리를 수행해야 합니다. 너무 많은 JavaScript 줄로 QML을 오염시키고 싶지 않기 때문에 외부 파일에 클래스를 만들고 해당 메서드 중 하나에 신호를 연결했습니다.

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1
import "action.js" as ActionJs

MainView {
    objectName: "mainView"

    applicationName: "example.cos64"

    useDeprecatedToolbar: false

    width: units.gu(20)
    height: units.gu(20)

    Page {

        Button {
            id: clickMeButton

            text: "Click me"

            onClicked: {
                console.log('clicked');
            }

            Component.onCompleted: {
                var action = new ActionJs.Action();
                clickMeButton.clicked.connect(action.handleClick)
            }
        }
    }
}

액션.js

function Action() {

    this.handleClick = function() {
        console.log('handleClick');
        this.process();
    }

    this.process = function() {
        console.log('processing...')
    }
}

작동하지만 슬롯에서 다른 메서드를 호출할 수 없습니다.

Starting /usr/lib/x86_64-linux-gnu/qt5/bin/qmlscene...
qml: clicked
qml: handleClick
file:///home/co64/projects/ubuntu/Example/action.js:5: TypeError: Property 'process' of object [object Object] is not a function

'프로세스'가 함수로 인식되지 않는 이유는 무엇입니까? 내가 뭔가 잘못하고 있는 걸까요?

답변1

나는 즉각적인 문제는 내부 함수 정의 내에서 컨텍스트가 변경된다는 것이라고 생각합니다 Action. this안에 있는 물체 는 Action.handleClick(), Action.handleClick가 아닙니다 Action.

하지만 조금 백업해 보겠습니다. 여기서 함수 내부 패러다임을 사용하는 이유는 무엇입니까? 해당 환경에는 네임스페이스가 없기 때문에 이는 브라우저 Javascript에서 일반적입니다. 다른 기능을 짓밟는 것을 방지하려면 모든 기능을 보유하는 객체를 생성하여 네임스페이스를 가짜로 만듭니다.

그러나 QML은하다네임스페이스를 수행합니다. QML 파일에서 Action참조 해야 했습니다 . ActionJS.Action따라서 함수에 대해 다른 네임스페이스를 구현할 필요가 없습니다. JS 파일의 최상위 레벨에 넣으세요.

function handleClick() {
    console.log("handleClick");
    process();
}

function process() {
    console.log("processing...");
}

그런 다음 QML 파일에서 다음을 수행하십시오.

Component.onCompleted: {
    clickMeButton.clicked.connect(ActionJS.handleClick)
}

아니면 그냥

onClicked: ActionJS.handleClick()

Action여기서는 실제로 네임스페이스 이외의 다른 개체가 필요하지 않다고 가정합니다 . 그렇다면 다음에 대해 배워야합니다.원기. 당신은 또한에 대해 알고 싶을 수도 있습니다.pragma library, 이 JS 파일을 여러 QML 파일에서 사용하려는 경우.

관련 정보