Hi,

I created a popover implementation for emberjs (basically copied code from bootstrap and adapted it) : https://gist.github.com/patricklx/7613893 Maybe you want to integrate it into this project :)

here is a working example: http://jsfiddle.net/VAyEL/

The popover automatically binds to the previous element in the dom. If it doesnt exist it will select it's parent. It's also possible to set the element by defining "onElement" (id of the element).

There are two problems with button groups:

1. The documentation -- similar to Modals -- suggests that button meta data be carried in Ember Objets when in fact it is required that these be standard JS objects. The fix to this is just a documentation fix.
2. Even when using the JS objects, I can set both title and type attributes and while they get passed into the component correctly the title is not displayed on the button. Here's what it looks like:

This is based on the following config in the controller:

filterTypes: [
    {title:"All", type:"success"},
    {title:"filter1"},
    {title:"filter2"},
    {title:"filter3"},
    {title:"filter4"},
    {title:"filter4"},
    {title:"filter5"}
]

And the following template:

{{bs-btn-group size="standard" contentBinding="filterTypes" selectedBinding="selected"}}

Loving this add-on but am struggling to get the modal functionality to work. Specifically the footer buttons are causing me problems. Here's what it looks like:

And yet the controller, I believe, is setup as the showcase suggests it should be:

myModalButtons: [
    Ember.Object.create({title: 'Submit', clicked: "submit"}),
    Ember.Object.create({title: 'Cancel', clicked: "cancel", dismiss: 'modal'})
],

The HTML that Ember generates for a button node is:

<button id="ember1042" class="ember-view btn btn-default">
    <script id="metamorph-265-start" type="text/x-placeholder"></script>
    <script id="metamorph-265-end" type="text/x-placeholder"></script>
</button> 

Have you seen this before? Any help on how I can get around this?

I'm currently looking for accordion support. http://getbootstrap.com/2.3.2/javascript.html#collapse

I am more than willing to help out where I can and will look more into implementing this and putting in a PR if I can.

At first glance, I'm not quite sure how things are being done, but I will study some of the ember component docs. If you are available to pair program or skype for a bit, I'd love to join in and knock out other components as well.

I've tried using Alert properties on notifications like dismiss and dismissAfter but they are not working. Is there another way to use those properties on notifications now?

Differentiate Notifications from Alerts by converting Notifications to more of a Growl style but bootstrap styles of course. Maybe a simple CSS change would work well.

This is an interesting implementation: http://aaron.haurwitz.com/#!/posts/growllike-notifications-with-emberjs

I want to extend the step-by-step Hello World! tutorial (alert works fine), with a modal, but im getting the following error:

Uncaught Error: <Ember._MetamorphView:ember322> Handlebars error: Could not find property 'bs-button' on object App.IndexController:ember314.

index.html

       <script type="text/x-handlebars">
          <h2>Welcome to Ember.js</h2>

          {{outlet}}
        </script>
        <script type="text/x-handlebars" data-template-name="index">
            {{bs-alert message="A self destroyable hello world message!" type="info" dismissAfter=2 fade=true}}
            //we only render a button which will programatically create the modal
            {{bs-button title="Create Modal" clicked="createModalProgramatically"}}
            {{outlet}}
        </script>

app.js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});
App.IndexController = Ember.Controller.extend({
  manualButtons: [
    {title: 'Submit', clicked: "submitManual"},
    {title: 'Cancel', dismiss: 'modal'}
  ],

  actions: {
    submitManual: function() {
      Bootstrap.NM.push('Modal destroyed!', 'success');
      return Bootstrap.ModalManager.close('manualModal');
    },
    createModalProgramatically: function() {
      //@property {string} The name of the modal, required later to close the modal (see submitManual function above)
      //@property {string} The title of the modal.
      //@property {string} The template name to render within the modal body, a View class may also be specified.
      //@property {array} Array of Button meta data
      //@property {object} The controller instance that instantiate the modal.
      Bootstrap.ModalManager.open('manualModal', 'Hello', 'demo-template', this.manualButtons, this);
    }
  }
});

bs-modal.max.js is included,

DEBUG: ------------------------------- DEBUG: Ember : 1.4.0 DEBUG: Ember Data : 1.0.0-beta.7.f87cba88 DEBUG: Handlebars : 1.1.2 DEBUG: jQuery : 1.10.2 DEBUG: -------------------------------

One of the things I really find hard to build with Ember is forms,

I'd like BFE to provide a complete support for forms without making it too "fix" in a way that it's hard to modify (behaviorally & visually)

I'll be glad to get some comments if you guys have about what would you expect from it,

My thoughts are:

1. Support Bootstrap's tags for proper layout.
2. Support vertical / horizontal layout
3. Support validating (with no JS code whenever possible)
4. Support styling for displaying error messages, green / red backgrounds when validation is success / fails.

Thanks.

I just tried the demo code from the showcase for a simple modal, but when I press the "show modal" button, my screen looks like this:

all I can do is press escape. What am I missing ?

You have iconType defined like this in the itemViewClass

iconType: (function() {
    var hash, type;
    type = this.get('content.type');
    hash = {
      'info': 'fa-bullhorn',
      'success': 'fa-check',
      'warning': 'fa-exclamation',
      'danger': 'fa-times'
    };
    return hash[type] || '';
  }).property('content.type')

How can I extend this with a basic piece of custom behavior? I just want to change return hash[type] || ''; to return hash[type] || type; so I'm able to also pass in custom font awesome icons.

I'm stuck, I can't figure this out without hacking.

Hey guys,

I'm not 100% sure that this is the ideal place for this question/issue, so let me know for future reference.

Suppose I have two tabs: "TabOne", maps to route #/tab-one "TabTwo", maps to route #/tab-two

tab-one has a child route that renders inside of the "TabOne" tab pane. Let its route be #/tab-one/child

If the user navigates directly to #/tab-one/child (i.e., NOT to #/tab-one followed by #/tab-one/child), the TabOne tab link isn't active. It appears that bs-tabs catches transitions to exactly #/tab-one, not #/tab-one/child. This makes sense in general, but not for my specific case. Can I get the bs-tabs component to toggle the correct tab state or will I need to do this manually?

Thank you!

I know HTMLBars is still in canary but if someone could help point me in the right direction, I could work on a PR to get the templates compatible for HTMLBars and ember 1.10. Thanks!

I added bootstrap for ember to my project via ember-cli-bootstrap. My browser is now giving "unsafe-inline" warnings in the console. I can disable this by editing environment.js and adding "unsafe-inline" to the "style-src" of the content security policy (CSP). It would be nice to not have to do that, however. This basically weakens a security feature of the browser.

I believe the issue is due to attributeBindings: ['style'] in some components. In particular, I noticed this in Notifications and GrowlNotifications.

Pressing the escape key while the modal is visible will dismiss the modal without triggering the action associated with the button handling dismiss: 'modal'. That same is true for clicking the close button x in the modal header.

For example, when a cancel button is created in the controller using Ember.Object.create({title: 'Cancel', clicked:"cancel", dismiss: 'modal'}) clicking the button will trigger the cancel action and dismiss the modal. However, pressing the escape key or clicking the close button x in the modal header will only dismiss the modal without triggering the cancel action.

The examples in the Modal Showcase exhibit the behavior described above.