Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: c11168d425
Fetching contributors…

Cannot retrieve contributors at this time

183 lines (160 sloc) 5.382 kb
<!--
// Copyright (C) 2011-2012 Software Languages Lab, Vrije Universiteit Brussel
// This code is dual-licensed under both the Apache License and the MPL
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/* Version: MPL 1.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is a demo of the Observe strawman
*
* The Initial Developer of the Original Code is
* Tom Van Cutsem, Vrije Universiteit Brussel.
* Portions created by the Initial Developer are Copyright (C) 2011-2012
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
*
*/
-->
<!--
This is a demo of the prototype implementation of the "Observe strawman proposal"
at http://wiki.ecmascript.org/doku.php?id=strawman:observe
as proposed by Rafael Weinstein, Erik Arvidsson and others
Tested on:
- Firefox 13
- Chrome 20 (with experimental JS flag turned on).
-->
<html>
<head>
<title>Observer Example</title>
</head>
<script src="../reflect.js"></script>
<script src="observer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
// Observer module is a function that takes a global Object on which to install
// the necessary methods, and returns a "deliver" function.
// The "deliver" function should be called in a separate turn to deliver
// pending change records
var deliver = Observer(Object);
function assert(bool, msg) {
var div = $("<div/>")
.css('color', bool ? 'green' : 'red')
.text(msg);
$("#output").append(div);
}
// == Unit tests and page set-up ==
$(document).ready(function () {
$('#deliver').click(deliver);
var observableTarget = {};
// Tests below taken from
// http://wiki.ecmascript.org/doku.php?id=strawman:observe
function observer(records) {
var record;
console.log(records);
assert(records.length === 6, "expected 6 changes");
/*{
"type": "new",
"object": o,
"name": "x"
},*/
record = records[0];
assert(record.type === "new", "0: type");
assert(record.object === observableTarget, "0: target");
assert(record.name === "x", "0: name");
/*{
"type": "updated",
"object": o,
"name": "x",
"oldValue": 1
},*/
record = records[1];
assert(record.type === "updated", "1: type");
assert(record.object === observableTarget, "1: target");
assert(record.name === "x", "1: name");
assert(record.oldValue === 1, "1: oldValue");
/*{
"type": "new"
"object": o,
"name": "y"
},*/
record = records[2];
assert(record.type === "new", "2: type");
assert(record.object === observableTarget, "2: target");
assert(record.name === "y", "2: name");
/*{
"type": "reconfigured",
"object": o,
"name": "x"
},*/
record = records[3];
assert(record.type === "reconfigured", "3: type");
assert(record.object === observableTarget, "3: target");
assert(record.name === "x", "3: name");
/*{
"type": "new",
"object": o,
"name": "toString"
},*/
record = records[4];
assert(record.type === "new", "4: type");
assert(record.object === observableTarget, "4: target");
assert(record.name === "toString", "4: name");
/*{
"type": "deleted",
"object": o,
"name": "x"
// "oldValue" will only be present if the deleted property was a data property.
}*/
record = records[5];
assert(record.type === "deleted", "5: type");
assert(record.object === observableTarget, "5: target");
assert(record.name === "x", "5: name");
}
var o = Object.createObservable(observableTarget);
var o2 = {}
Object.observe(o, observer);
o.x = 1;
o2.x = 2; // doesn't notify
o.x = 3;
o.y = 4;
var tmp = 5;
Object.defineProperty(o, "x",
{ get: function () { return tmp; },
set: function (v) { tmp = v; },
// FIXME: added due to bug in Firefox that auto-completes descriptors
// https://bugzilla.mozilla.org/show_bug.cgi?id=601329
configurable: true,
enumerable: true });
o.x = 6; // Doesn't notify
o.toString = 7;
delete o.x;
Object.unobserve(o, observer);
o.y = 8; // Doesn't notify
assert(true, "tests done, press button to get notifications");
});
</script>
<body>
<button id="deliver">Click to deliver all pending change records</button>
<div id="output"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.