2016-10-19 2 views
0

Я пытаюсь использовать bootstrap.js в одном из моих компонентов, но обнаруживаю, что мне нужно wrap(document) для его работы (исправлено?). До сих пор у меня есть:Wrap document var in Polymer Web Component

// Script to work around bootstrap.js not working in Web Components. From https://github.com/Polymer/polymer/issues/625 
(function(document){ 
    jQuery.getScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js', function() { 
    console.log('getScript bootstrap.js run successfully!') 
    }); 
})(wrap(document)); 

Но это не похоже на работу - document еще оригинальная страница с моей тенью-DOM в, которая недоступна bootstrap.js - как я могу обернуть document так он указывает к моим компонентам DOM для bootstrap.js?

ответ

0

Мое предположение, что мне нужно было обернуть document, было не так!

Рабочий пример: http://plnkr.co/edit/qRXoiG?p=preview

<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html"> 

<dom-module id="proto-element"> 
    <link rel="import" type="css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <template> 
    <style> 

    </style> 
    <div class="container"> 
     <h2>Simple Collapsible</h2> 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> 
     <div id="demo" class="collapse"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </div> 
    </div> 
    </template> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <script> 
    // register a new element called proto-element 
    Polymer({ 
     is: "proto-element", 

     // add a callback to the element's prototype 
     ready: function() { 
     console.log('bootstrap3_enabled:', (typeof $().emulateTransitionEnd == 'function')); 
     } 
    }); 
    </script> 
</dom-module>