QML условный Binding не работает, как ожидалось

Question

Если у меня есть простой Binding объект формы:

Rectangle { 
    height: 400 
    width: 500 

    property var someObj: null 

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

Тогда я бы ожидать, что, когда someObj не null, someObj «s 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 
    } 
} 

Answer 2

Я бы сделать это следующим образом:

import QtQuick 2.0 
import QtQuick.Controls 1.4 

Rectangle { 
    height: 400 
    width: 500 

    property var someObj 

    color: someObj ? someObj.color : "black" 

    Button { 
     id: buttonTest 
     text: "test" 
     onClicked: parent.someObj = test 
    } 
    Button { 
     id: buttonTest2 
     anchors.left: buttonTest.right 
     text: "test2" 
     onClicked: parent.someObj = test2 
    } 

    QtObject { 
     id: test 
     property color color: "red" 
    } 

    QtObject { 
     id: test2 
     property color color: "blue" 
    } 
} 

Если someObj не определено, цвет прямоугольника черный, если определен некоторый Obj, значение выбрано свойство цвета.

Редактировать: Я уже видел, что это только то, что предложил mlvljr в комментариях, извините.