[Jifty-commit] jifty branch, master, updated. 9e072ae08af1d44a2697e42e9aabdc2308c491b1
Jifty commits
jifty-commit at lists.jifty.org
Thu Jan 14 17:42:31 EST 2010
The branch, master has been updated
via 9e072ae08af1d44a2697e42e9aabdc2308c491b1 (commit)
from 4f64d90ea93136029b947da74e487dd73540f646 (commit)
Summary of changes:
share/web/static/js/app_behaviour.js | 60 +++++++++++++++++++--------------
1 files changed, 34 insertions(+), 26 deletions(-)
- Log -----------------------------------------------------------------
commit 9e072ae08af1d44a2697e42e9aabdc2308c491b1
Author: Thomas Sibley <trs at bestpractical.com>
Date: Thu Jan 14 17:41:30 2010 -0500
Update app behaviour doc
diff --git a/share/web/static/js/app_behaviour.js b/share/web/static/js/app_behaviour.js
index 4511ab5..c7ef6c7 100644
--- a/share/web/static/js/app_behaviour.js
+++ b/share/web/static/js/app_behaviour.js
@@ -1,18 +1,15 @@
/*
This file is intended for you to add application-specific Javascript
- behaviours. See http://bennolan.com/behaviour/ for an introduction
- to the Behaviour library.
-
- Behaviour lets you apply javascript to elements of the DOM using CSS
- selectors. A simple example:
+ behaviours. Behaviour lets you apply javascript to elements of the DOM using
+ CSS selectors. A simple example:
var myrules = {
"h2.rounded": function(element) {
- Rico.Corner.round(element);
+ doRounding(element);
}
};
-
+
Behaviour.register(myrules);
In general, you'll rarely if ever have to worry about calling
@@ -23,12 +20,12 @@
Some Notes About Writing Behaviours
===================================
- * Jifty's Behaviour.js uses the cssQuery[1] library to do our DOM
- lookups by CSS selector. cssQuery is very powerful, but can be
- slow as DOM size grows. For best performance, follow these
+ * Jifty's Behaviour.js uses the jQuery[1] library to do our DOM
+ lookups by CSS selector. jQuery is very powerful, but can be
+ slower as the DOM size grows. For best performance, follow these
guidelines when writing behaviours, whenever possible:
- * Prefer selectors that begin with '#id'. cssQuery will use
+ * Prefer selectors that begin with '#id'. jQuery will use
document.getElementByID to get the ID in question, meaning we
only have to search a small fragment of the DOM by hand
@@ -37,7 +34,7 @@
specifically using DOM calls, again hugely reducing the amount
of DOM walking we have to do.
- [1] http://dean.edwards.name/my/cssQuery/
+ [1] http://jquery.com
* Behaviour has something of a reputation for leaking memory. The
@@ -47,8 +44,8 @@
Behaviour.register({
'a.help': function(e) {
e.onclick = function() {
- openInHelpWindow(this);
- return false;
+ openInHelpWindow(this);
+ return false;
}
}
});
@@ -57,7 +54,18 @@
garbage collection (See the footnote for details). To avoid this,
you can use one of the following two idioms:
- (a) declare the onclick function elsewhere:
+ (a) Use jQuery to bind events like onclick:
+
+ Behaviour.register({
+ 'a.help': function(e) {
+ jQuery(e).click(function() {
+ openInHelpWindow(this);
+ return false;
+ });
+ }
+ });
+
+ (b) Declare the onclick function elsewhere:
function openHelpLink() {
openInHelpWindow(this);
@@ -70,15 +78,15 @@
}
});
- (b) Set the element to 'null' at the end of the Behaviour function:
+ (c) Set the element to 'null' at the end of the Behaviour function:
Behaviour.register({
'a.help': function(e) {
e.onclick = function() {
- openInHelpWindow(this);
- return false;
+ openInHelpWindow(this);
+ return false;
}
- e = null;
+ e = null;
}
});
@@ -94,7 +102,7 @@
``Behaviour profile'' link at the bottom left hand corner of the
screen. Click it to get a breakdown of how much time your
javascript is spending in which behaviours, and whether the time
- is spent in looking up the CSS Selector you passed (cssQuery
+ is spent in looking up the CSS Selector you passed (jQuery
time), or in applying the Behaviour function (function time).
@@ -106,10 +114,10 @@
write this code:
Behaviour.register({
- 'a.help': function(e) { // <-- FUNCTION A
- e.onclick = function() { // <-- FUNCTION B
- openInHelpWindow(this);
- return false;
+ 'a.help': function(e) { // <-- FUNCTION A
+ e.onclick = function() { // <-- FUNCTION B
+ openInHelpWindow(this);
+ return false;
}
}
});
@@ -121,8 +129,8 @@
`onclick' property, and this a circular chain of references is
created, which IE will never garbage collect.
- Solution (a) addresses this by moving function `b' outside of the
- scope where `e' is defined. Solution (b) addresses it by setting
+ Solution (b) addresses this by moving function `b' outside of the
+ scope where `e' is defined. Solution (c) addresses it by setting
`e' to null in the environment around `b', which means that that
environment no longer contains a reference to that DOM node, and
the loop no longer exists.
-----------------------------------------------------------------------
More information about the Jifty-commit
mailing list