Using a Bootstrap components

Using a Bootstrap components

Bootstrap (not only them) provides components in order to have better visualization inside our pages. See components

Modal

There is a ModalView inside Focus Framework. Please see its documentation in order to know how to use it.

Other components

In order to use them you have to respect two steps:

• First declaring a container inside your view template. As an example the case of a popover arround a button.

<button type="button" class="btn btn-default" id="popoverCustomButton">
  Popover Custom
</button>

• Inside the view which have to display the component, you have to call the javascript function which initialize the component after the template rendering. So you can use the afterRendermethod of all the Framework Views.

var ConsultEditView = Fmk.Views.ConsultEditView;
var template = require('./templates/viewTemplate')
var View = ConsultEditView.extend({
  templateConsult: template,
  afterRender: function afterRenderUsingABootstrapComponent(){
     ConsultEditView.prototype.afterRender.call(this);
     $('#popoverCustomButton', this.$el).popover({
      html: true,
      title: "hello", 
      trigger: "click",
      content: "<a href='#'> Hello ...</a>"
     });
  } 
});

Then you sould have a popover display on the right of the button when you click on it.

You can improve this code by using a template for the modal content.

var ConsultEditView = Fmk.Views.ConsultEditView;
var template = require('./templates/viewTemplate');
var popoverTemplate = require('./templates/popoverTemplate');
var View = ConsultEditView.extend({
  templateConsult: template,
  afterRender: function afterRenderUsingABootstrapComponent(){
     ConsultEditView.prototype.afterRender.call(this);
     $('#popoverCustomButton', this.$el).popover({
      html: true,
      title: "hello", 
      trigger: "click",
      content: popoverTemplate({name: this.model.get('name')})//Just an example here.
     });
  } 
});