主页 / ubuntu / 问题 / 629393
Accepted
Cos64
Asked: 2015-05-29 06:09:52 +0800 CST

将信号连接到 JavaScript 方法的正确方法是什么？

  • 772

在 Ubuntu 手机应用程序中，我需要在事件发生时执行一些逻辑。由于我不想用太多行的 JavaScript 污染 QML，我在外部文件中创建了一个类，并将信号连接到它的一个方法：

主.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

为什么“过程”不被识别为函数？难道我做错了什么？

ubuntu-touch

1 个回答

  1. Best Answer

    我相信直接的问题是上下文在函数定义内部发生了变化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对象。如果这样做，您应该了解prototype。.pragma library如果您打算在多个 QML 文件中使用此 JS 文件，您可能还想了解。

    • 2

相关问题