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



  • 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
        }
    

    }
    @





  • 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



  • 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() {...}@



  • 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
    }@



  • [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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.