How to bind a dynamically created QML Element to the ListElement properties in JavaScript

Aleskey78

I'm creating a custom QML Element derived from TextInput in JavaScript like this:
@function createItem(index, parent) {
var root = parent
while (root !== 'undefined' && !root.hasOwnProperty('model')) {
root = root.parent
}

var model = root.model
var listelement = model.get(index)

var component = Qt.createComponent(controlFilename);
if (component.status == Component.Ready) {
       var control = component.createObject(parent);
       control.height= controlHeight
       control.width = controlWidth
       control.anchors.verticalCenter = parent.verticalCenter
       control.anchors.right = parent.right

...

    // binding model.value to control.value
    var newBinding = Qt.createQmlObject('import QtQuick 1.0; Binding { }', parent)
    newBinding.target = control
    newBinding.property = "value"
    newBinding.value = listelement.value

    return control;
}

}
@

in TestDelegate.qml
@
Component {
Item {
id: delegateItem

...

    Component.onCompleted: {
        JS.createItem(
            index,
            delegateItem)
    }

}
@

and the binding does not work...

But if I declare Binding in QML then it works!
@
Component {
Item {
id: delegateItem

...

    // it is ugly!!!
    property variant control: undefined
    Component.onCompleted: {
        control = JS.createItem(
            index,
            delegateItem)
    }

    Binding {
        target: control
        property: 'value'
        value: model.value
        //value: delegateItem.parent.parent.model.get(index).value
    }

}
@

minimoog77

See this thread

http://developer.qt.nokia.com/forums/viewthread/5247/

mbrasser

Hi,

The problem is this line:

@newBinding.value = listelement.value@

Which assigns a once-off value to the Binding element's value property (value will be set to the value of listelement.value at the time of the assignment, and never be subsequently updated).

There are several capabilities coming in QtQuick 1.1 which may be of help, such as the ability to establish bindings from imperative JS code, and the ability to pass property values/bindings to createObject() ( http://doc.qt.nokia.com/4.7-snapshot/qtquick-whatsnew.html ).

Regards,
Michael

Aleskey78

Thanks for your replies.

Michael:
in the document you've pointed out said: "Functions can be assigned to properties from JavaScript to create property bindings." - what kind of syntax is used for this? Like normal JS ?: @object.property = function() {...}@

Aleskey78

Before I'll get Qt 4.7.4, I'm going to use Binding element for dynamic control creation :)
@Binding {
id: binding
target: JS.createItem(
index,
delegateItem)
property: 'value'
value: model.value
}@

mbrasser

[quote author="Aleskey78" date="1303974743"]what kind of syntax is used for this? Like normal JS ?: @object.property = function() {...}@
[/quote]

Yes, that's correct. If you do a "make docs" in the source tree, you should be able to see the documentation for this -- I'm still trying to track down why it isn't showing up online for the 4.7-snapshot docs.

Regards,
Michael