Question

按照指南here，以编程方式创建模式对话框。

<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（而不是索引控制器），因为我希望能够以编程方式从应用程序的任何位置调用模式对话框。

如何在不想在每个想要使用模态的控制器上重复模态代码的情况下完成此操作？

我在这里缺少什么？谢谢！

Answer 1

您可以将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
});

使用bootstrap-for-ember在EmberJS应用程序中创建Twitter Bootstrap模式

1 个答案: