Navbar collapse button is not working in mobile

[woosungchu]

What I try is 'navbar-default' template in bootstrap official website.
http://getbootstrap.com/components/#navbar-default

The other component work fine but collapse button is not working in mobile.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" aria-expanded="false"
      data-toggle="collapse" data-target="#navbar-collapser" >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{#link-to 'index' class="navbar-brand"}}Brand{{/link-to}}
    </div><!-- end navbar-header-->

    <div id="navbar-collapser" class="collapse navbar-collapse">
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default hidden-xs">
          <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
          <li>{{#link-to "index"}}Repositories{{/link-to}}</li>
          <li>{{#link-to "index"}}Stars{{/link-to}}</li>
          <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li>{{#link-to "index"}}Test{{/link-to}}</li>
             <li role="separator" class="divider"></li>
             <li>{{#link-to "index"}}Test{{/link-to}}</li>
           </ul>
         </li>
      </ul>
    </div>
  </div>
</nav>

<div class="body">
  {{outlet}}
</div>

[woosungchu]

I try 'ember-twiddle' to see comfortable but I stuck on this library into 'twiddle.json' file.
It shows 'Could not determine extension of 1.0.0-alpha.2' .
Does 'ember-bootstrap' have cdn url?

[simonihmig]

You don't use any of the Ember components there!? It cannot work this way. Plain markup does not work, you have to use the Ember components as it is documented here:

• http://www.ember-bootstrap.com/#/components/navbars
• http://www.ember-bootstrap.com/api/classes/Components.Navbar.html

[woosungchu]

I'm sorry to post in short-thinking. I though Ember components is optional.

If I want to avoid using bs-components, I should not use bootstrap components or javascript. Right?

Thank you for maintaing this good open source.

[simonihmig]

Well, the idea for ember-bootstrap is to replace the original bootstrap javascript plugins (jQuery based) with real native Ember components. For just the static things in bootstrap like grids etc. you don't need the Ember components. But for the dynamic parts, that also would require the use of the bootstrap javascript plugins, you should use the components provided by this addon.

Theoretically you may be able to work with the original bootstrap.js, but I think this will not work well in an Ember app, no properties you can bind things to, no Run Loop support, etc. But that is out of scope for ember-bootstrap, you are on your own if you really want to try that. (I would highly not recommended this)

In your example above, the navbar uses the collapse functionality, so it should be used with components!