Do I have to mess up html tags if I want to use 'ember-bootstrap'?

Design
1

I am new in ember js and trying to add navbar index page with bootstrap. While I search any notice before I use bootstrap into ember application, I found disgusting ‘ember-bootstrap’ template like below

{{#bs-navbar-content}}
{{#bs-form class="navbar-form navbar-left" role="search" action="submit"}}
  {{#bs-form-group}}
    {{bs-input type="text" class="form-control" placeholder="Search"}}
 {{/bs-form-group}}
 {{bs-button class="hidden-xs" type="default" buttonType="submit" icon="glyphicon glyphicon-search"}}
{{/bs-form}}
{{#bs-navbar-nav class="navbar-right"}}
    {{#bs-nav-item}}{{#link-to "index"}}Repositories{{/link-to}}{{/bs-nav-item}}
    {{#bs-nav-item}}{{#link-to "index"}}Stars{{/link-to}}{{/bs-nav-item}}
    {{#bs-dropdown tagName="li"}}
      {{#bs-dropdown-toggle}}Others <span class="caret"></span>{{/bs-dropdown-toggle}}
      {{#bs-dropdown-menu}}
        {{#bs-nav-item}}{{#link-to "index"}}Test{{/link-to}}{{/bs-nav-item}}
        {{#bs-nav-item}}{{#link-to "index"}}Test{{/link-to}}{{/bs-nav-item}}
      {{/bs-dropdown-menu}}
    {{/bs-dropdown}}<!--end dropdown -->
{{/bs-navbar-nav}}

Do every ember developer write code like this? I can’t understand why ‘ember-bootstrap’ suggest to mess up html code and make it hard to read. Handlebar.js? it’s okay because it is template but I want someone explain me why ‘ember-bootstrap’ should change all tags to handlebar style…

2

Here it seems you are looking at a Handlebars template adding in a lot of extra bootstrap components. Looking at the addon and they have created lots of components to make it easier to re-use but that is overkill if you ask me.

You can use Bootstrap as you would in a normal web app without any of this junk. You can just install it with Bower if you want or include a CDN link on your page.

As long as you are including the CSS for markup if you enter the regular Bootstrap HTML markup into your templates it will work just fine. You can then create your own components if you want.

If you are in the process of creating a new app and aren’t tied to Bootstrap you should check out Bourbon SASS and Neat / bitters ./ Refills -http://bitters.bourbon.io/. I think its much better.

1 Like
3

You can use GitHub - martinic/ember-cli-bootstrap-css: Lightweight addon that only adds bootstrap.css to avoid bower and use navbar like this

https://github.com/broerse/ember-cli-blog/blob/master/app/templates/application.hbs

1 Like
4

Both I thought bootstrap component in ember app will work with the regular Bootstrp HTML markup but even simple navbar example is not working.

Try this. Navbar-collapse button is not working in mobile.

You can also see

You don’t use any of the Ember components there!? It cannot work this way. Plain markup does not work Navbar collapse button is not working in mobile · Issue #204 · ember-bootstrap/ember-bootstrap · GitHub