ES6 - Bootstrap NavBar

Fiddle modeling the bootstrap navbar control using ES6 classes.

by brady houseknecht

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css">
<div class="page-header">
  <h1>&nbsp;Nav Bar</h1>
</div>
<div id="fiddleHook">
</div>

CSS

#fiddleHook {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slide-up;
  -webkit-animation-name: slide-up;
}

@-moz-keyframes slide-up {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: 0%;
  }
}

@-webkit-keyframes slide-up {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: 0%;
  }
}

JavaScript

(function(app) {
    "use strict";


    app.model = app.model || {};
    app.store = app.store || {};
    app.view = app.view || {};
    app.view.navbar = app.view.navbar || {};


    app.model.Link = class {
        config() {
            return {
                href: '#',
                text: 'link1',
                target: '_self',
                title: 'click here'
            }
        }
        constructor(config) {
            this._href = config && config.hasOwnProperty('href') ? config.href : this.config().href;
            this._text = config && config.hasOwnProperty('text') ? config.text : this.config().text;
            this._target = config && config.hasOwnProperty('target') ? config.target : this.config().target;
            this._title = config && config.hasOwnProperty('title') ? config.title : this.config().title;
        }
        get href() {
            return this._href;
        }
        get text() {
            return this._text;
        }
        get target() {
            return this._target;
        }
        get title() {
            return this._title;
        }
        get el() {
            let a = window.document.createElement('a');
            a.setAttribute('href', this.href);
            a.setAttribute('target', this.target);
            a.setAttribute('title', this.title);
            a.innerHTML = this.text;
            return a;
        }
    }


    app.store.Links = class {
        constructor(config) {
            this._data = config && config.hasOwnProperty('links') ? config.links : [];
        }
        get data() {
            return this._data;
        }
    }


    app.view.navbar.NavBar = class {
        config() {
            return {
                id: 'navbar1',
                parent: null,
                title: 'Links',
                hook: window.document.body,
                autoBind: false,
                css: {
                    base: 'navbar navbar-default',
                    container:...