4
\$\begingroup\$

I'm working on adding checkbox functionality that controls adding new checkboxes to a div element as well a tracking checkbox behavior. My goal is to make this dirt simple. I've noticed that there is some JavaScript function prototypes for creating objects such as checkboxes and also controlling basic behavior such as visibility, whether its checked or disabled and maybe even adding a label or image next to the checkbox. My plan is to add this to an array or list and how can this be done?

I just need basic class object in JavaScript to be created to track just whether its checked, visible, or disabled. In my case when its disabled it will not be checked, but may change in a later release. I've looked at GWT and ZWT JavaScripting libraries and they seem too complicated. Is there a simple solution I can do myself?

Looking for some constructive criticism, a good link or two for reference, and perhaps an estimate on whether this is feasible and how would I add a checkbox to the class below, and do I also have to worry about adding events to this? And what would be the best way to track multiple famous people in this example: a list, an array, or another class? I'm thinking a dynamic array of some kind.

    // Constructor for dynamic checkbox classes
var FamousPerson = function (id, checkStatus, visibleStatus, enabledStatus) {
    this.id = id;  // primary key for a person for a specific row
    this.checkStatus = checkStatus;
    this.visibleStatus = visibleStatus;
    this.enabledStatus = enabledStatus;
}

FamousPerson.prototype.getId() = function () {
    return this.id;  // id is reference stored in xml or database row
};

FamousPerson.prototype.update = function (checkStatus, visibleStatus, enabledStatus) {
    // note: don't update id
    this.checkStatus = checkStatus;  // boolean 0 is not checked, 1 is checked
    this.visibleStatus = visibleStatus; // boolean 0 is not visible, 1 is visible
    this.enabledStatus = enabledStatus; // boolean 0 is not enalbed, 1 is enabled
};

FamousPerson.prototype.getCheckStatus = function () {
    return this.checkStatus;
};

FamousPerson.prototype.getVisibleStatus = function () {
    return this.visibleStatus;
};
\$\endgroup\$

3 Answers 3

3
\$\begingroup\$

In my opinion, it seems like this should be it's own class. You should have another object to control the FamousPerson objects and add them when they are instantiated. I would also decouple the checkbox from the FamousPerson class itself and tie the behavior in elsewhere.

As for the solution part, if you still want to add it in here, check out this. There's an example of creating a checkbox with a label and adding it to the DOM. Shouldn't be too hard to patch some of it in to your existing class.

\$\endgroup\$
1
\$\begingroup\$
this.checkStatus = checkStatus;  // boolean 0 is not checked, 1 is checked
this.visibleStatus = visibleStatus; // boolean 0 is not visible, 1 is visible
this.enabledStatus = enabledStatus; // boolean 0 is not enalbed, 1 is enabled

I'd call these fields as checked, visible and enabled. It would make the comments unnecessary and it would be obvious what true and false values mean.

\$\endgroup\$
1
\$\begingroup\$

I think you are mixing up different concepts here. Presentation logic is quite different from domain logic and both shouldn't be mixed together. I'm having trouble understanding what you are trying to achieve (what does the checked status means in your domain?), however in my opinion a FamousPerson should be expressed in domain terms and should not have any knowledge of specific ui data such as visible, checked...etc.

I strongly suggest you to read about MVC. There are lots of MVC, MVP, MVVM... flavors in JS and that's why we mostly categorize these as MV* rather than MVC now.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.