javascript - Resolving property and function "overrides" in QML

Question

It seems like although QML supports "overriding" of properties and functions, the support is somewhat clunky. Here is an example snippet:

// T1.qml
QtObject {
    property int p: 1
    function f() { return 1 }
}

// T2.qml
T1 {
    property string p: "blah"
    function f() { return "blah" }
}


// usage
T1 {
    Component.onCompleted: {
        var obj = this
        for (var k in obj) console.log(k + " " + typeof obj[k] + " " + obj[k])
    }
}

T2 {
    Component.onCompleted: {
        var obj = this
        for (var k in obj) console.log(k + " " + typeof obj[k] + " " + obj[k])
    }
}

The behavior of overrides is consistent - no matter how many times a member was overridden, you always get the right one, even if you do something like this:

QtObject {
    property T1 p : T2 {}
    Component.onCompleted: console.log(p.p + " " + p.f())
}

Although the property is declared with type T1, it references a T2 object, and thus the output says "blah blah".

It also works on a `per instance" basis:

T2 {
    function f() { return 1.5 }
    Component.onCompleted: {
       console.log(f())
    }
}

The output from iterating T1 is as expected:

qml: objectName string 
qml: p number 1
qml: objectNameChanged function function() { [code] }
qml: pChanged function function() { [code] }
qml: f function function() { [code] }

However, the output for T2 is a little odd:

qml: objectName string 
qml: p string blah
qml: p string blah
qml: objectNameChanged function function() { [code] }
qml: pChanged function function() { [code] }
qml: f function function() { [code] }
qml: pChanged function function() { [code] }
qml: f function function() { [code] }

It lists the "overridden" members twice, however, it doesn't seem like one is from the "base" type and the other from the "derived" - as both p's are strings.

var obj = this
for (var k in obj) if ((k === "f") && (typeof obj[k] === "function")) console.log(obj[k]())

Calling both f functions outputs "blah" twice - so the same applies for the function "overrides" as well.

I expected that iterating the "derived" object would show the property and function twice, but one of those would be from the base type. Having them practically duplicated, both referring to the same member seems pointless and illogical. Overriding at instance level puts yet another member, and once again, all three reference the latest override. So it is technically not possible to even pick the overrides manually.

So my question is whether it is possible to specify the overrides:

// in T2.qml - pseudocode
property string p: T1::p + "blah" //  value is "1 blah"
f() { return T1:: f() + "blah" } //  returning "1 blah"

Attempting to do it in the naive way results in an epic fail:

// in T2.qml
property string p: p + "blah" //  binding loop, p does not refer to T1's p
f() { return f() + "blah" } //  stack overflow, f does not refer to T1's f

Answer 1

Found one simple and naive manual solution:

// T1.qml
QtObject {
    function f() { return f_t1() }
    function f_t1() { return 1 }
}

// T2.qml
T1 {
    function f() { return f_t2() }
    function f_t2() { return f_t1() + " blah " }
}

// usage
T2 {
    function f() { return f_t2() + 1.5}
    Component.onCompleted: console.log(f()) // outputs 1 blah 1.5
}

In short, have explicitly named function for every level of the "inheritance" that overrides, and use the non-decorated function override for polymorphic access, thus now the "base" type implementations can be reused by the derived.