diff options
author | David Boddie <david.boddie@nokia.com> | 2010-09-15 17:21:39 (GMT) |
---|---|---|
committer | David Boddie <david.boddie@nokia.com> | 2010-09-15 17:21:39 (GMT) |
commit | f23bce37a8a3536bfedce7cc2d57f0761b2d1e31 (patch) | |
tree | e7dd9c7f7724df3f12fe819321e44c63f4eb0c2c /doc/src/declarative | |
parent | f41eac269d354ebeb797b9cb173b09fc996564cf (diff) | |
parent | b832dffc1eb85181aa2d99afd1a6c764b634091d (diff) | |
download | Qt-f23bce37a8a3536bfedce7cc2d57f0761b2d1e31.zip Qt-f23bce37a8a3536bfedce7cc2d57f0761b2d1e31.tar.gz Qt-f23bce37a8a3536bfedce7cc2d57f0761b2d1e31.tar.bz2 |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/oslo-staging-2 into 4.7
Diffstat (limited to 'doc/src/declarative')
-rw-r--r-- | doc/src/declarative/javascriptblocks.qdoc | 34 | ||||
-rw-r--r-- | doc/src/declarative/propertybinding.qdoc | 33 |
2 files changed, 62 insertions, 5 deletions
diff --git a/doc/src/declarative/javascriptblocks.qdoc b/doc/src/declarative/javascriptblocks.qdoc index 18da3d2..d290690 100644 --- a/doc/src/declarative/javascriptblocks.qdoc +++ b/doc/src/declarative/javascriptblocks.qdoc @@ -173,6 +173,40 @@ handler to execute at startup, they are run sequentially in an undefined order. Likewise, the \l {Component::onDestruction} attached property is triggered on component destruction. + +\section1 Property Assignment vs Property Binding + +When working with both QML and JavaScript, it is important to differentiate between +QML \l {Property Binding} and JavaScript value assignment. In QML, a property +binding is created using the \e {property: value} syntax: + +\code +Rectangle { + width: otherItem.width +} +\endcode + +The \c width of the above \l Rectangle is updated whenever \c otherItem.width changes. On the other +hand, take the following JavaScript code snippet, that runs when the \l Rectangle is created: + +\code +Rectangle { + + Component.onCompleted: { + width = otherItem.width; + } +} +\endcode + +The \c width of this \l Rectangle is \e assigned the value of \c otherItem.width using the +\e {property = value} syntax in JavaScript. Unlike the QML \e {property: value} syntax, this +does not invoke QML property binding; the \c rectangle.width property is set to the value +of \c otherItem.width at the time of the assignment and will not be updated if that value +changes. + +See \l {Property Binding} for more information. + + \section1 QML JavaScript Restrictions QML executes standard JavaScript code, with the following restrictions: diff --git a/doc/src/declarative/propertybinding.qdoc b/doc/src/declarative/propertybinding.qdoc index 552b9e4..314bf67 100644 --- a/doc/src/declarative/propertybinding.qdoc +++ b/doc/src/declarative/propertybinding.qdoc @@ -94,10 +94,29 @@ Rectangle { } \endcode -Imperatively assigning a value directly to a property will also implicitly remove a binding -on a property. A property can only have one value at a time, and if code explicitly sets -this value the binding must be removed. The \l Rectangle in the example below will have -a width of 13, regardless of the otherItem's width. + +\section1 Effects of Property Assignment in JavaScript + +Assigning a property value from JavaScript does \e not create a property binding. +For example: + +\code +Rectangle { + + Component.onCompleted: { + width = otherItem.width; + } +} +\endcode + +Instead of creating a property binding, this simply sets the \c width of the \l Rectangle +to the value of \c other.width at the time the JavaScript code is invoked. See +\l {Property Assignment vs Property Binding} for more details. + +Also note that assigning a value to a property that is currently bound will remove the binding. +A property can only have one value at a time, and if any code explicitly sets +this value, the binding is removed. The \l Rectangle in the example below will have +a width of 13, regardless of the \c otherItem's width. \code Rectangle { @@ -109,7 +128,9 @@ Rectangle { } \endcode -There is no way to create a property binding directly from imperative JavaScript code. +There is no way to create a property binding directly from imperative JavaScript code, +although it is possible to set up a \l Binding object (shown below). + \section1 Binding Element @@ -126,5 +147,7 @@ Binding { value: slider.value } \endqml + + */ |