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: "[email protected]"
};

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
– Chris Baker, Commented Jun 9, 2011 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
– JamesEggers, Commented Jun 9, 2011 at 18:10

Luca Matteis · Accepted Answer · 2011-06-09 17:55:10Z

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 9, 2011 at 17:55

Luca Matteis

29.3k22 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JamesEggers Over a year ago

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.

Collectives™ on Stack Overflow

Unexpected Results in Testing JavaScript Objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related