Question

我正在尝试在Polymer-Element中实现Bootstrap Modal。我尝试了几种方法，但收效甚微。任何建议，将不胜感激。我仍然试图围绕所有这些新标准，所以我确定我错过了一些东西。

我想要什么

<body>
  <x-foo></x-foo> 
</body>

x-foo有x-bar

的地方

<polymer-element name="x-foo" extends="div">
  <template>
    <x-bar></x-bar>
  </template>
  <script>
    Polymer('x-foo', {
      // goodness
    })
  </script>
</polymer-element>

<polymer-element name="x-bar">
  <template>
    <style>
        .modal {
           // local style
        }
    </style>
    <div class="modal fade">
       <!-- ... rest of Bootstrap Modal tags / content -->
       <div id="awesome" on-click="awesome"></div>
    </div>
  </template>
  <script>
    Polymer('x-bar',{
      ready : function() {
        window.$(this.$.modal).modal({show:false});
      },
      show : function() {
        window.$(this.$.modal).modal('show');
      },
      awesome : function() {
        alert('awesome');
      }
    });
  </script>
</polymer-element>

现在这个有用了，有点儿。在x-bar上调用show（）将显示弹出窗口，但不会显示本地样式。未显示的样式有意义，因为bootstrap.js删除了div.modal并将其附加到主体。但div.awesome的click处理程序永远不会触发。

现在我尝试了几种具有类似结果的变体。注意，我没有绑定到bootstrap Modal。但我感兴趣的是实现此标记的最佳实践和/或如何实现附加到主体以进行显示的自定义弹出窗口（当然，所有Web组件都很好）。

在Polymer中实现Bootstrap模式

0 个答案: