aboutsummaryrefslogtreecommitdiffstats
path: root/doc/src/qml
diff options
context:
space:
mode:
Diffstat (limited to 'doc/src/qml')
-rw-r--r--doc/src/qml/basictypes.qdoc17
-rw-r--r--doc/src/qml/javascriptblocks.qdoc13
-rw-r--r--doc/src/qml/propertybinding.qdoc19
-rw-r--r--doc/src/qml/qtbinding.qdoc2
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