绑定到导入的 Javascript 属性

Question

如何绑定到 Javascript 资源？

我是 QML 的新手，可能会以错误的方式思考这个问题，但在下面的示例中，我希望按钮在按下时显示“世界”。

主文件

import QtQuick 2.0
import QtQuick.Controls 1.0
import "model.js" as Model


Button {
    id: button
    text: Model.text

    onClicked: {
        Model.text = "World";
        print("Model.text is:", Model.text)
        print("button.text is:", button.text)
        // Model.text is "World"
        // button.text is "Hello"
        // They should both be "World"
    }
}

模型.js

var text = "Hello";

我也尝试使用 a Qt.binding，但没有任何区别。

主文件

import QtQuick 2.0
import QtQuick.Controls 1.0
import "model.js" as Model


Button {    
    onClicked: {
        Model.text = "World";
    }

    Component.onCompleted: {
        text = Qt.binding(function () { return Model.text })
    }
}

我正在寻找的最终结果是在专用的 Javascript 资源中拥有属性，例如窗口高度、颜色和图像路径等，并让任何使用它们的项目与对资源所做的任何更改保持同步。

编辑

发现一个相关问题：在 QML 中为其他 QML 文件声明全局属性

Answer 1

通常，您不能将 QML 属性绑定到纯 JavaScript 模块中的变量。我的建议是使用轻量级 QML 替代品 - QtObject。您可以向其添加自定义属性和信号集，例如：

QtObject {
    id: mySettings
    property string iconPath: "./icon.png"
}

稍后可以根据需要完全绑定此属性。