diff options
Diffstat (limited to 'doc/src/qml')
-rw-r--r-- | doc/src/qml/basictypes.qdoc | 17 | ||||
-rw-r--r-- | doc/src/qml/javascriptblocks.qdoc | 13 | ||||
-rw-r--r-- | doc/src/qml/propertybinding.qdoc | 19 | ||||
-rw-r--r-- | doc/src/qml/qtbinding.qdoc | 2 |
4 files changed, 30 insertions, 21 deletions
diff --git a/doc/src/qml/basictypes.qdoc b/doc/src/qml/basictypes.qdoc index 517bc953ea..c9998fe6e2 100644 --- a/doc/src/qml/basictypes.qdoc +++ b/doc/src/qml/basictypes.qdoc @@ -436,10 +436,9 @@ \brief A var type is a generic property type. A var is a generic property type capable of storing any data type. - It is equivalent to a regular JavaScript variable, except that you - cannot assign a JavaScript function to such a property. - For example, var properties can store numbers, strings, objects and - arrays: + It is equivalent to a regular JavaScript variable. + For example, var properties can store numbers, strings, objects, + arrays and functions: \qml Item { @@ -454,13 +453,10 @@ property var aVector3d: Qt.vector3d(100, 100, 100) property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })] property var anObject: { "foo": 10, "bar": 20 } + property var aFunction: (function() { return "one"; }) } \endqml - Attempting to assign a JavaScript function to a var property will result in - a binding assignment as per other property types. You can assign a JavaScript - array containing a single function element instead. - It is important to note that changes in regular properties of JavaScript objects assigned to a var property will \b{not} trigger updates of bindings that access them. The example below will display "The car has 4 wheels" as @@ -481,6 +477,11 @@ } \endqml + If the onCompleted handler instead had \tt{"car = new Object({wheels: 6})"} + then the text would be updated to say "The car has 6 wheels"., since the + car property itself would be changed, which causes a change notification + to be emitted. + A \c var type property can also hold an image or pixmap. A \c var which contains a QPixmap or QImage is known as a "scarce resource" and the declarative engine will attempt to diff --git a/doc/src/qml/javascriptblocks.qdoc b/doc/src/qml/javascriptblocks.qdoc index b9f1e6f0b8..a898f20049 100644 --- a/doc/src/qml/javascriptblocks.qdoc +++ b/doc/src/qml/javascriptblocks.qdoc @@ -72,7 +72,7 @@ Rectangle { id: button width: 200; height: 80; color: "lightsteelblue" - MouseArea { + MouseArea { id: mousearea anchors.fill: parent @@ -103,7 +103,7 @@ Rectangle { color: mousearea.pressed ? "steelblue" : "lightsteelblue" - MouseArea { + MouseArea { id: mousearea anchors.fill: parent } @@ -366,6 +366,15 @@ Likewise, the \l {Component::onDestruction} attached property is triggered on component destruction. +\section1 JavaScript and Property Binding + +Property bindings can be created in JavaScript by assigning the property the value returned +by calling Qt.binding() where the parameter to Qt.binding() is a \c function +that returns the required value. + +See \l {qml-javascript-assignment}{Property Assignment versus Property Binding} for details. + + \section1 QML JavaScript Restrictions QML executes standard JavaScript code, with the following restrictions: diff --git a/doc/src/qml/propertybinding.qdoc b/doc/src/qml/propertybinding.qdoc index 81ca4bbfd3..6922f54003 100644 --- a/doc/src/qml/propertybinding.qdoc +++ b/doc/src/qml/propertybinding.qdoc @@ -87,7 +87,7 @@ The property binding causes the width of the \c Rectangle to update whenever the \c {parent}'s width changes. Assigning a property value (using the equals sign "\c {=}") does not create a -property binding. +property binding (unless explicitly assigned, see below). \snippet doc/src/snippets/qml/properties.qml property assignment Instead of creating a property binding, the assignment simply sets the \c Rectangle @@ -100,9 +100,9 @@ and if any code explicitly re-sets this value, the property binding is removed. \section1 Binding to JavaScript Functions The \c{property : value} syntax for property binding is QML-specific and cannot -be used in JavaScript. Instead, to bind a property from JavaScript, assign a \c -function to the property that returns the required value. The following code -correctly creates +be used in JavaScript. Instead, to bind a property from JavaScript, assign the +result returned by the \c{Qt.binding()} function to the property. This will cause +a binding assignment on the specified property. The following code correctly creates the binding in JavaScript rather than QML: \qml @@ -110,7 +110,7 @@ Item { width: 100 Component.onCompleted: { - height = (function() { return width * 2 }) + height = Qt.binding(function() { return width * 2 }) } } \endqml @@ -124,10 +124,8 @@ binding. For example, the \c Component.onCompleted handler below is defined within the scope of the \l Item, and references to \c width within this scope would refer to the \l Item's width, rather than that of the \l Rectangle. To bind the \l -Rectangle's \c height to its own \c width, the function needs to explicitly -refer to \c this.width rather than just \c width. Otherwise, the height of the -\l Rectangle would be bound to the width of the \l Item and not the \l -Rectangle. +Rectangle's \c height to its own \c width, the function passed to Qt.binding() +needs to explicitly refer to \c this.width rather than just \c width. \qml Item { @@ -141,7 +139,8 @@ Item { } Component.onCompleted: { - rect.height = (function() { return this.width * 2 }) + rect.height = Qt.binding(function() { return this.width * 2 }) + console.log("rect.height = " + rect.height) // prints 200 } } \endqml diff --git a/doc/src/qml/qtbinding.qdoc b/doc/src/qml/qtbinding.qdoc index b480d1292f..d8dd66bded 100644 --- a/doc/src/qml/qtbinding.qdoc +++ b/doc/src/qml/qtbinding.qdoc @@ -43,7 +43,7 @@ You may want to mix QML and C++ for a number of reasons. For example: \li To use functionality defined in a C++ source (for example, when using a C++ Qt-based data model, or calling functions in a third-party C++ library) \li To access functionality in the Qt Declarative module (for example, to dynamically generate -images using QQmlImageProvider) +images using QQuickImageProvider) \li To write your own QML elements (whether for your applications, or for distribution to others) \endlist |