QML条件绑定不按预期工作

Question

如果我有一个简单Binding的形式对象:

Rectangle {
    height: 400
    width: 500

    property var someObj: null

    Binding on color {
        when:  someObj
        value: someObj.color
    }
}

然后,我希望的是,当someObj不null,someObj的color属性绑定到该对象的color属性.我实际得到的是运行时错误消息:

TypeError: Cannot read property 'color' of null

这有什么原因不起作用？

做几乎等效的JavaScript表达式:

color: {
    if ( someObj != null ) {
        return someObj.color;
    } else {
        return "black";
    }
}

按预期工作.

Answer 1

该QML语法定义属性值初始化赋值右侧的花括号表示绑定赋值。在初始化var属性时，这可能会令人困惑，因为 JavaScript 中的空花括号可以表示表达式块或空对象声明。如果您希望将var属性初始化为空对象值，则应将花括号括在括号中。

例如：

Item {
    property var first:  {}   // nothing = undefined
    property var second: {{}} // empty expression block = undefined
    property var third:  ({}) // empty object
}

在前面的示例中，第一个属性绑定到一个空表达式，其结果为undefined。第二个属性绑定到一个包含单个空表达式块的表达式("{}")，该表达式块同样具有undefined结果。第三个属性绑定到一个被计算为空对象声明的表达式，因此该属性将使用该空对象值进行初始化。

同样，JavaScript 中的冒号可以是对象属性值分配，也可以是代码标签。因此，使用对象声明初始化var属性也可能需要括号：

Item {
    property var first: { example: 'true' }    // example is interpreted as a label
    property var second: ({ example: 'true' }) // example is interpreted as a property
    property var third: { 'example': 'true' }  // example is interpreted as a property
    Component.onCompleted: {
        console.log(first.example) // prints 'undefined', as "first" was assigned a string
        console.log(second.example) // prints 'true'
        console.log(third.example) // prints 'true'
    }
}

所以代码应该如下：

Rectangle {
    height: 400
    width: 500

    property var someObj: ({color: ''})

    Binding on color {
        when: someObj.color
        value: someObj.color
    }
}