2016-10-19 2 views
0

bootstrap.jsを私のコンポーネントの1つに使用しようとしていますが、正しく動作するにはwrap(document)が必要です。Polymer Webコンポーネントで文書varをラップします

// 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はまだbootstrap.jsにアクセスできないで私の影-DOM、と元のページです - どのように私はdocumentはそれを指してラップすることができます: は、これまでのところ私が持っていますbootstrap.js用の私のコンポーネントのDOMに?

答えて

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> 
関連する問題