# Attempting to make a Navigation Component

**URL:** <https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300>\
**Category:** DoneJS\
**Created:** [June 5, 2016, 2:30am UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300 "2016-06-05T02:30:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 5, 2016, 2:30am UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300/1 "2016-06-05T02:30:55Z")

</div>

So, I’m trying to abstract my application out into components, but I’m not really sure what I’m doing.

I’m guessing on a lot of what I’ve done, and I don’t really know how to go forward.

I have created a “ **bootstrap-navbar** ” component with JS:

> <https://github.com/leoj3n/my-app/blob/master/src/bootstrap/navbar/navbar.js>

with STACHE:

> <https://github.com/leoj3n/my-app/blob/master/src/bootstrap/navbar/navbar.stache>

An “ **app-navigation** ” component with JS:

> <https://github.com/leoj3n/my-app/blob/master/src/app/navigation/navigation.js>

with STACHE (utilizing `<bootstrap-navbar>`):

> <https://github.com/leoj3n/my-app/blob/master/src/app/navigation/navigation.stache>

Then used `<app-navigation/>` in `index.stache`.

I know there has to be something wrong with this approach; it just doesn’t feel right.

Any insight as to how to do this properly would be appreciated. For example, how should I manage a list of pages, and How should I pass the active state down to the component that is rendering the navigation?

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 5, 2016, 7:46am UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300/2 "2016-06-05T07:46:00Z")

</div>

Reasons why I might question my current approach:

- First time using `{{#each}}` and `route`.
- First time trying to add custom [pages] data to `ViewModel`.
- Don’t know how to pass down “active” state to **bootstrap-navbar** component without making it dependent.
- The **bootstrap-navbar** STACHE expects to receive `{{pages}}`, which is defined on the **app-navigation** `ViewModel`; not sure about the sanity/portability of this API.
- Not sure about use of `Map` vs. `DefineMap` for the `ViewModel` (have seen some `Map` examples where only certain data is inside the `define`, while the rest is not, but not sure why/what that means).
- What if I wanted to be able to toggle some functionality within **bootstrap-navbar** , like the collapse functionality? How would I specify that when using the component?

Feels “kludge-y”. What’s a better way of doing this?

If I were creating this as a custom element in Polymer, I think the API would look more like:

```auto
<bootstrap-navbar collapse="true">
  <a href="/">Home</a>
  <a href="photo" class="active">Photos</a>
  <a href="video">Videos</a>
</bootstrap-navbar>

```

Which would be closer to “platform” but not sure how to accomplish this style of custom element or if it makes sense to do it this way in Done/CanJS. It’s just easier to reason about, and what I’m more familiar with. I do imagine I could have the `{{#each}}` in the mustache template spit out the `<a/>`s, but I could also probably just do it the way I’m already doing it. Obviously, I’m a bit confused; I hope someone can clear this up for me.

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 7, 2016, 6:19pm UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300/3 "2016-06-07T18:19:28Z")

</div>

The following `multi-select` component has given me a lot of insight how I should build my component:

> <https://github.com/icanjs/multi-select/blob/3903683179779a31bd30503f75579c8e4b7a5bc2/src/demo.html#L15-L19>

> <https://github.com/icanjs/multi-select/blob/3903683179779a31bd30503f75579c8e4b7a5bc2/src/demo.html#L86>

So, it looks like I should be able to keep the **bootstrap-navbar** component just expecting elements like I outlined in my last reply. In the **multi-select** component, they also specified an API to pass `list=""` and `selected-prop=""` attributes (instead of HTML elements) which is cool:

> <https://github.com/icanjs/multi-select/blob/3903683179779a31bd30503f75579c8e4b7a5bc2/src/demo.html#L47-L52>

But I’ll probably just stick with the element method, to keep things simple.

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [June 8, 2016, 6:56am UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300/4 "2016-06-08T06:56:48Z")

</div>

interesting approach. how does your nav-component now look like?

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 8, 2016, 10:09am UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300/5 "2016-06-08T10:09:00Z")

</div>

I’ve extracted the Bootstrap stuff out into a DoneJS plugin separate from my main project:

> **[leoj3n/donejs-plugin-bootstrap](https://github.com/leoj3n/donejs-plugin-bootstrap)**
>
> Bootstrap components for your DoneJS app. Contribute to leoj3n/donejs-plugin-bootstrap development by creating an account on GitHub.

I actually decided to try and implement the attribute method because I realized that would actually be easier (no having to parse inner DOM and watch for mutations with observers) but I am stuck trying to implement the component demo if you would take a look:

> <https://github.com/leoj3n/donejs-plugin-bootstrap/blob/2f5f88725643badfc4f99a2d807d15405aa4cdf9/src/components/navbar/navbar.html>

The comment shows what I was trying before resorting to creating a “dummy-element” which does seem to work. Mind you I am using the bleeding edge packages (see `package.json`) and am not entirely sure how to setup the view model like I was trying to do in the commented area if you or anyone else has any insight on that would be great!

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 8, 2016, 10:00pm UTC](https://forums.bitovi.com/t/attempting-to-make-a-navigation-component/300/6 "2016-06-08T22:00:42Z")

</div>

Solution found for adding to the `#demo` element’s viewModel:

> **[donejs/donejs](https://gitter.im/donejs/donejs?at=575892af2eaa837d71e7a3e6)**
>
> @leoj3n: Ah that was f-ing it! Could have sworn I tried that last night, but must not have had the correct combination of things yet. Happy to try out the new stuff; it pushes one to read through the source code when something doesn't work; and it's...

Needed to use `document.getElementById("demo")` instead of `$("#demo")`.