在EmberJS应用中使用Bootstrap -for-ember创建Twitter引导模式

Creating a Twitter Bootstrap modal in an EmberJS application using bootstrap-for-ember

本文关键字：Twitter 创建 模式 -for-ember Bootstrap 应用 EmberJS      更新时间：2023-09-26

按照这里的指导，以编程方式创建一个模态对话框。

<h1 class="page-header">Welcome!</h1>
{{bs-button title="Create Modal" clicked="createModalProgramatically"}}

我创建了一个modal_controller.js文件，并在其中:

MyEmberApp.IndexController = 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', 'index', this.manualButtons, this);
    }
  }
});

我想扩展ApplicationController (而不是索引控制器)，因为我希望能够从应用程序中的任何地方以编程方式调用模态对话框。

我怎么能做到这一点没有重复我的模态代码在每个控制器我想使用模态?

我在这里错过了什么?谢谢!

您可以将Bootstrap代码放入控制器中，如MyBootstrapController: 

MyEmberApp.MyBootstrapController = 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() {
            Bootstrap.ModalManager.open('manualModal', 'Hello', 'index', this.manualButtons, this);
        }
    }
});

，然后让你所有的下一个控制器继承MyBootstrapController，像这样:

MyEmberApp.IndexController = MyEmberApp.MyBootstrapController.extend({
     // Some other controller stuff
});
相关文章：