实现 ember js 弹出框的策略

Question

我有一个弹出窗口功能要在我使用 ember js 开发的项目中实现。我有一个按钮，单击该按钮时应显示一个带有操作菜单列表的弹出窗口。

我尝试了一个带有 bootstrap 弹出窗口的示例，这对我们的事业来说看起来不错，但我无法使用它，因为我们没有使用 bootstrap 库并且不想包含它仅适用于此弹出功能。

ember js 是否对 popover 功能有任何内置支持（我们使用的是 ember v0.2.3）？我知道它有一个 modal implementation 但这会禁用页面上的所有其他功能，直到关闭。
如果您知道任何可以移植试用的自定义弹出窗口 impl，请告诉我。

谢谢！

Answer 1

嵌套组件将是理想的选择。像模态示例那样渲染到插座中对我来说意义不大。

您需要在组件的 .js 文件中处理点击事件。

在 isOpen 等组件上使用属性来跟踪是否应显示弹出窗口。

在组件模板中使用 if isOpen 来控制是否呈现子组件（弹出窗口）。

编辑：Working JSBin

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <script type='text/x-handlebars'
          data-template-name='application'>
     <p>The element below is a component.<br><br><br><br><br><br><br></p>
     {{popover-item text='click or hover for popover' class='popover-wrapper'}}
  </script>


  <script type='text/x-handlebars'
          data-template-name='components/popover-item'>  
      <a href='#' class='popover-link'>{{text}}</a>
      {{#if isOpen}}
        {{popover-menu isOpen=isOpen}}
      {{/if}}
  </script>


  <script type='text/x-handlebars'
          data-template-name='components/popover-menu'>
    {{#if isOpen}}
      <div class='popover'>
        <ul>        
          <li><a href='#'>popover item one</a></li>
          <li><a href='#'>popover item two</a></li>
          <li><a href='#'>popover item three</a></li>
        </ul>
      </div>
    {{/if}}
  </script>

</body>
</html>

Javascript:

App = Ember.Application.create();

App.Router.map(function(){
  return [];
});

App.PopoverItemComponent = Ember.Component.extend({
  isOpen: false,

  click: function() {
    this.toggleProperty('isOpen');
  },

  openPopover: function() {
    this.set('isOpen', true);
  }.on('mouseEnter'),

  closePopover:function() {
    this.set('isOpen', false);
  }.on('mouseLeave')
});

CSS（非常非常粗糙）

* { box-sizing: border-box; }
body { font-family: sans-serif; }
a {
  text-decoration: none;
  color: #000;
}
.popover-link {
  display: inline-block;
  width: auto;
  padding: 10px;
  background: #6FAEEC;
}
.popover-link:hover {
  background: #70B5F9;
}
.popover-wrapper {
  position: relative;
}
.popover-link {}
.popover {
  border: 1px solid #ddd;
  position: absolute;
  bottom: 40px;
  background: #fff;
  padding: 0;
  box-shadow: 3px 3px 9px -4px rgba(0,0,0,0.75);
}
  .popover ul {
    list-style:none;
    margin: 0;
    padding: 0;
  }
  .popover a {
    display: block;
    padding: 5px  10px;
    vertical-align:middle;
    border-bottom: 1px solid #efefef; #efefef;
  }
  .popover a:hover {
    background: #efefef;
  }

实现 ember js 弹出框的策略

strategies to implement a ember js popover

popover

ember.js