0

I am new to the concept of prototype inheritance and I have the following: 

var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyOverview'), $('.edit-search'));
dynamicPropertyOverview.setUpPill(); 
$(window).resize(dynamicPropertyOverview.setUpPill.bind(dynamicPropertyOverview));

var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyReviews'), $('.edit-search'));
dynamicPropertyReview.setUpPill(); 
$(window).resize(dynamicPropertyReview.setUpPill.bind(dynamicPropertyReview));

var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyMap'), $('.edit-search'));
dynamicPropertyMap.setUpPill(); 
$(window).resize(dynamicPropertyMap.setUpPill.bind(dynamicPropertyMap));

where my prototype function is as follow:

function Tab(page, pill) {
    this.page = page;
    this.pill = pill;
}

Tab.prototype.setUpPill = function () {
    if(dynamicPropertyController.isDynamicPropertyOverview(this.page) && checkMobileAndTabletVisibility.isTabletView()){
        dynamicPropertyController.addSearchModalMobileTrigger();
        if(!pillView.isSearchBarNotHidden()){
            pillView.hideSearchBarDisplayPill(this.page, this.pill);
        }
    }
    else{
        dynamicPropertyController.addSearchBarDesktopTrigger();
    }
};

The problem I have is that each time a new instance is called:

1) var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search'));
2) var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
3) var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search'));

is will always be overridden by the next one.

I thought that one way to get around this is to wrap each instance in a if statment like this:

 if($('#dynamicPropertyReviews').length){
    var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
    dynamicPropertyController.init($('#dynamicPropertyReviews'), $('.edit-search'));
    dynamicPropertyReview.setUpPill(); 
    $(window).resize(dynamicPropertyReview.setUpPill.bind(dynamicPropertyReview));
}

although it works I would like to understand if there is a better approach to solve this.

DYNAMIC PROERTY CONTROLLER ADDED:

var dynamicPropertyController = (function() {

    var searchBarModalTrigger = 'js-open-mobile-search';

    function isDynamicPropertyOverview(page){
        return page.length;
    }

    function addSearchModalMobileTrigger(){
        $('.edit-search').removeClass('display-searchBar').addClass(searchBarModalTrigger);
    }

    function addSearchBarDesktopTrigger(){
        $('.edit-search').removeClass(searchBarModalTrigger).addClass('display-searchBar');
    }

    function init(page, pill){
        if(page.length){
            pillView.hideSearchBarDisplayPill(page, pill);
        }

    }

    return {
        isDynamicPropertyOverview: isDynamicPropertyOverview,
        addSearchModalMobileTrigger: addSearchModalMobileTrigger,
        addSearchBarDesktopTrigger: addSearchBarDesktopTrigger,
        init: init
    }

})();
Aessandro
  • 5,517
  • 21
  • 66
  • 139
  • `new` keyword always creates new object. – webduvet Feb 29 '16 at 11:20
  • 1
    Your problem rather seems to be that you have only a one global `dynamicPropertyController`. Please show us its definition. What exactly do you think is overwritten, where? Your `Tab` instances are surely distinct objects. – Bergi Feb 29 '16 at 11:42
  • 1) var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search')); 2) var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search')); 3) var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search')); – Aessandro Feb 29 '16 at 11:46
  • 3 overrides 2 which overrides 1 – Aessandro Feb 29 '16 at 11:46
  • Could your issue be related to having multiple elements with the `edit-search` class? If you want each tab to "own" its own edit-search element you could try something like `dynamicPropertyController.init($('#dynamicPropertyReviews'), $('#dynamicPropertyReviews .edit-search'));` or have tab remember its container and have the tab manipulate only elements from the container: `#dynamicPropertyReviews other_selectors` – HMR Feb 29 '16 at 15:08
  • For more information about prototype (code you posted does not show a problem there): http://stackoverflow.com/a/16063711/1641941 – HMR Feb 29 '16 at 15:11

0 Answers0