Question

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

我尝试了一个带有bootstrap popover的示例，这看起来很好，但是我无法使用它，因为我们没有使用bootstrap lib而且不想只为这个popover功能包含它。

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

谢谢！

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 popover的策略

1 个答案: