john-n-smith/mvcobject-js

An implementation of the KVO pattern, inspired by Google Maps API v3 MVCObject class

#An implementation of the KVO pattern, inspired by Google Maps API v3 MVCObject class

After finding the Google Maps API v3 MVCObject an extremely useful tool when building MVC based JavaScript apps, MVCObject-js was written to replicate it's functionality in a standalone script - you no longer need to download the whole Google Maps API just to use MVCObject.

Somewhat confusingly named, MVCObject is an implementation of the 'Observer' pattern. It just so happens it's extremely useful for building MVC based applications - it can serve as the glue between your Model View and Controller elements.

All methods are the same as google.maps.MVCObject - see the documentation here:

http://code.google.com/apis/maps/documentation/javascript/reference.html#MVCObject

This is a standalone class - you can use it in any of your JavaScript applications, it doesn't have to be Google Maps related.

##How it works

The functionality centres around the fact that Javascript creates references to objects when assigned, not a copy.

When an class property is bound, it is converted into an object and a reference to the object assigned to each class. In this way, each class is accessing the exact same property.

Class properties must be accessed and modified using the setters and getters. Should any 'changed' callbacks be registered, they will be invoked when set() is called.

##A quick example

ObjectA.prototype = new MVCObject();

function ObjectA()
{
    this.foo = 'bar';
};

ObjectA.prototype.foo_changed = function()
{
    alert('foo changed, it is now: ' + this.get('foo'));
};

ObjectB.prototype = new MVCObject();

function ObjectB()
{
    this.foo = 'this will be overwritten when bound';
};

var object_a = new ObjectA();
var object_b = new ObjectB();

object_b.bindTo('foo', object_a);

object_b.set('foo', 'I am cool');

// alerts 'foo changed, it is now: I am cool';

Please note, the order of binding does matter. The "bindee"'s property overwrites the "binder"'s property.

Also note, if your objects' 'constructor' property is important, be sure to correct this after setting up the prototype:

ObjectA.prototype = new MVCObject();
ObjectA.prototype.constructor = ObjectA;

A good example (using Google's MVCObject) can be found here:

http://code.google.com/apis/maps/articles/mvcfun.html

mvcobject-js's Issues

Clearing an observer by setting it to null throws an error next time the observed property changes.

What steps will reproduce the problem?
var abc = new MVCObject;
abc.property = null;
abc.property_changed = function() { console.log('triggered'); };
abc.set('property', 'value1');
> triggered
abc.property_changed = null;
abc.set('property', 'value2');
> "TypeError: Property 'property_changed' of object #<MVCObject> is not a 
function" from line ~225

I expect no error when my callback is null. Instead I get an error that 
basically says the code tried to run "null".

Using latest version 0.21. By replacing the following line:

if(key + '_changed' in this) this[key + '_changed']();

with this:

if(typeof this[key + '_changed'] === 'function') this[key + '_changed']();

I was able to fix the error. Also verified that an actual observer function 
there will run.

Cheers,
Dave

Original issue reported on code.google.com by [email protected] on 26 Jan 2013 at 1:07

Unbinding a non-bound property throws the wrong error.

var abc = new MVCObject;
abc.set('testing', 'hi');
abc.unbind('testing');

> Uncaught TypeError: Cannot use 'in' operator to search for '__my_index' in 
null
from line 235 of source.

I would personally expect unbinding an unbound property to do nothing. The code 
appears to want to throw a different error: '"' + key + '" is not a bound 
property.' but the code never gets there.

The key from line 235 is this clause:

'__my_index' in this[key]

...where this[key] is apparently null. Adding a check for this[key] resolves 
the issue.

Again, I would prefer (and have modified the source locally) to not throw an 
error at all in this scenario.

Original issue reported on code.google.com by [email protected] on 3 Dec 2012 at 11:27

What is the test at the start of .set() supposed to do?

I added a comment to line 193 indicating I think there is mistake:

http://code.google.com/p/mvcobject-js/source/browse/trunk/MVCObject.js#193

The comment appears to indicate that one isn't allowed to set a property that 
isn't already set, but then how does one set a value the first time?

Original issue reported on code.google.com by [email protected] on 16 Sep 2012 at 4:23

Sample Code is raising foo_changed callback not found exceptions

What steps will reproduce the problem?
1. only execute sample code
2.
3.

What is the expected output? What do you see instead?
Uncaught TypeError: Property 'foo_changed' of object #<MVCObject> is not a 
function 

What version of the product are you using? On what operating system?
lastest version MVCObject-source-0.20.js

Please provide any additional information below.
need to modify code in MVCObject.prototype.set function


for(var i in this[key].__shared_object.__observers)
{
    if(this[key].__shared_object.__observers[i] === null) continue;

    //ADDED 2012.10.10 addition code Trigger the observer's observer's callbacks
    if( this[key].__shared_object.__observers[i].key + '_changed' in this[key].__shared_object.__observers[i].obj)
                this[key].__shared_object.__observers[i].obj[this[key].__shared_object.__observers[i].key + '_changed']();
}

Original issue reported on code.google.com by [email protected] on 10 Oct 2012 at 7:29

Attachments:

• MVCObject-source-0.20.js

Setting a value which is not currently on the object throws an error. (Ditto unbind, et al.)

What steps will reproduce the problem?
var abc = new MVCObject();
abc.set('newProperty', 'anything')
> Cannot set value for undefined property "newProperty".

There's no reason that this error needs to be thrown. If I remove this line 
(line 193) entirely, the object behaves as expected – my value gets set 
(down on line 222), and line 225 calls my callback (unless it's null - see 
issue 4).

We've discussed elsewhere that this (awesome) library throws a lot of errors. 
In my experience this is a seriously annoying design flaw. Unbinding a property 
that isn't bound throws an error on line 296, but the result of an unbind 
operation - having something that isn't bound - can be achieved by simply 
returning.

Original issue reported on code.google.com by [email protected] on 26 Jan 2013 at 1:29