API Docs for:
Show:

BricksUI.BuModal

Extends Ember.View
Module: bricksui-thirdpart
Parent Module: bricksui

Summary

对应Bootstrap modal组件,对Bootstrap modal进行轻量级封装

基本用法

{{bu-button title="Show Modal" clicked="show"}}
{{#bu-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}}
<p>Modal content!</p>
{{/bu-modal}}

对应控制器

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

     actions: {
       //Submit the modal
       submit: function() {
         Bootstrap.NM.push('Successfully submitted modal', 'success');
         return Bootstrap.ModalManager.hide('myModal');
       },

       //Cancel the modal, we don't need to hide the model manually because we set {..., dismiss: 'modal'} on the button meta data
       cancel: function() {
         return Bootstrap.NM.push('Modal was cancelled', 'info');
       },

       //Show the modal
       show: function() {
         return Bootstrap.ModalManager.show('myModal');
       }
     }
   });

确认型modal
{{bu-button title="Delete" clicked="confirm"}}

对应控制器

Showcase.ShowComponentsModalController = Ember.Controller.extend({
   confirm: {
       confirm: {
           Bootstrap.ModalManager.confirm(@);
},
//invoked when user press "confirm"
modalConfirmed: {
           Bootstrap.NM.push('Confirmed!', 'success')
       },
//invoked when user press "cancel"
modalCanceled: {
           Bootstrap.NM.push('Cancelled!', 'info')
       }
}
})

Bootstrap.ModalManager.confirm可接受的参数有

controller 对应的控制器,可手动指定
title        modal窗口标题
message    model的内容
confirmButtonTitle    确定按钮的文本描述
cancelButtonTitle    取消按钮的文本描述

通过编程方式调用modal
//we only render a button which will programatically create the modal
{{bu-button title="Create Modal" clicked="createModalProgramatically"}}

对应控制器

    Showcase.ShowComponentsModalController = Ember.Controller.extend({
     manualButtons: [
         Ember.Object.create({title: 'Submit', clicked:"submitManual"})
         Ember.Object.create({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);
       }
    }
    });

Item Index