Unexpected Results in Testing JavaScript Objects

Question

I'm in the process of truly learning the nuances of working with JavaScript objects and ran into a snag.

I have a set of "namespaced" objects to segment the DOM and Model to act on. Below is code:

function Sandbox2(){
this.page = {
      FirstName: document.getElementById("FirstName")
    , LastName: document.getElementById("LastName")
    , Email: document.getElementById("Email")
};

this.model = {
      FirstName: "James"
    , LastName: "Eggers"
    , Email: "James.R.Eggers@gmail.com"
};

this.behavior = {};

this.bindPageToModel = function(){
    for(var property in this.page){
        if (property){
            property.value = this.model[property];
        }
    }
};

    this.bindModelToPage = function(){
    for(var property in this.model){
        if (property){
            this.model[property].value = this.page[property];
        }
    }
};
};

Using JsTestDriver, I'm doing a number of tests to play around and try out a few things of the page and model objects. The specific test is below:

"test ModelBinding should be allowed." : function(){
        var sandbox2 = new Sandbox2();
        var page = sandbox2.page;
        page.FirstName = "Test";
        page.LastName = "Account";
        sandbox2.bindModelToProperty();

        assertEquals("Ensure the new values took.", page.FirstName, sandbox2.page.FirstName);
        assertEquals("New Page values should be in the model.", "Test", sandbox2.model.FirstName);
    }

In the above test, the first assertEquals passes; however, the second test resolves sandbox2.model.FirstName to "James" (the initial value).

Anyone have any recommendations on how I can change the code (original or test) to allow me to map the page object's values to the model object?

I will tell you that in practice, `FirstName: document.getElementById("FirstName")` isn't a good idea. You don't want to store references to DOM nodes in an object - this can create a circular reference for one, and for another if the DOM tree gets rebuilt (say because the page content was modified as a string [not good practice]), your reference will no longer be valid. You're better off grabbing a DOM node fresh before you use it as opposed to keeping a reference to it in an object's properties. — Chris Baker, Jun 09 '11 at 17:57
@Chris I fully agree. The snippet is really more a sandbox I'm playing around with while also learning JsTestDriver. In practice, I'd have the page object retrieve the specific nodes anew each time. — JamesEggers, Jun 09 '11 at 18:10

score 2 · Accepted Answer · answered Jun 09 '11 at 17:55

2

It seems like the issue is here:

for(var property in this.page){
    if (property){
        property.value = this.model[property];
    }
}

The property variable is actually the key value of the object (FirstName, LastName and Email). You're setting the value attributes on these string objects without any result.

I think you meant to do something like:

this.page[property].value = this.model[property];

answered Jun 09 '11 at 17:55

Luca Matteis

29,161
19
114
169

Thanks Luca! There was actually 2 issues. 1st, I was going from Model to Page instead of Page to Model in my initial code example (the code in question has been updated). The 2nd was resolved by you pointing out that `property` in this case is the string key and not the property itself. I had to remove the `.value` as well to get it to work. Thanks again. – JamesEggers Jun 09 '11 at 18:18

Unexpected Results in Testing JavaScript Objects

1 Answers1