Basic nshell BaseView implementation

custom_view.html

<section class="custom-view">
    <header>
        <h1>{{object.model.title}}</h1>
        <h3>{{object.model.subtitle}}</h3>
    </header>    
    <main>
        <nav>
            <ul>
                {% for items in object.model.items %}
                <li>
                    <a href='#' data-items-id='{{items.id}}'>
                        <h2>{{items.title}}</h2>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </nav>
    </main>
</section>

custom_view.js

var CustomView = function(root_element) {
    
    // Call the parent constructor
    BaseView.call(this, root_element, [CustomAppStates.app_state_browse], 'custom_view');
    
}
CustomView.prototype = new BaseView();
CustomView.prototype.constructor = CustomView;


/* ========================================================================
======= INITIALIZATION FUNCTIONS ==========================================
======================================================================== */

CustomView.prototype._init_custom_elements = function () {
    this.main_container = $(this.element).find("main")[0]; 
}

/* ========================================================================
======= EVENT LISTENERS ===================================================
======================================================================== */

CustomView.prototype._add_custom_listeners = function () {

    //Add listeners to any UI elements
    var parent = this;
   
    $(this.main_container).find("nav a").bind("mousedown", function(event){
        event.preventDefault();
        var target_item_id = $(this).attr("data-item-id");
        parent.states.set_current_item(target_item_id);
        parent.states.set_app_state(CustomAppStates.app_state_detail);
    });   

    this.states.add_listener(BaseStates.event_idle_state_change, this, this._render_idle_state);
}

CustomView.prototype._remove_custom_listeners = function(){
  
    $(this.main_container).find("nav a").unbind("mousedown");

    this.states.add_listener(BaseStates.event_idle_state_change, this);
}

/* ========================================================================
======= RENDERING FUNCTIONS ===============================================
======================================================================== */
CustomView.prototype._show = function () {
    $(this.element).fadeIn();
    $(this.header_container).addClass('showing');
};

CustomView.prototype._hide = function () {
    $(this.header_container).removeClass('showing');
    $(this.element).fadeOut();
};
CustomView.prototype._render_idle_state = function(){
    if(this.states.get_idle_state() == BaseStates.idle_state_pre_idle){
        $(this.element).addClass('idle');
    }else{
        $(this.element).removeClass('idle');
    }
}