在Polymer元素内使用外部脚本 [英] Use external scripts inside a Polymer element
问题描述
在Polymer元素内部需要"外部javascript的推荐方法是什么?例如，我正在构建一个视频组组件，该组件要显示在 Slick 轮播中
What is the recommended way to "require" external javascript inside of a Polymer element? For instance, I'm building a video group component that I want to display inside of a Slick carousel.
例如，对于自定义元素，我的代码可能如下所示:
For instance, my code might look like this for the custom element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
<polymer-element name="polymer-video-group" constructor="VideoGroupElement" attributes="">
<template>
<style>
/* styles for the custom element itself - lowest specificity */
:host {
display: block;
position: relative;
}
/*
style if an ancestor has the different class
:host(.different) { }
*/
</style>
<!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing
https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml
-->
<polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&callback=" response="{{response}}"></polymer-jsonp>
<template repeat="{{entry in response.feed.entry}}">
<iframe width="420" height="315" src="//www.youtube.com/embed/{{entry.gsx$id.$t}}" frameborder="0" allowfullscreen></iframe>
</template>
</template>
<script>
Polymer('polymer-video-group', {
// element is fully prepared
ready: function(){
this.$.jsonp.go();
},
// instance of the element is created
created: function() {
this.videos = [];
this.response = {};
},
// instance was inserted into the document
enteredView: function() { },
// instance was removed from the document
leftView: function() { },
// attribute added, removed or updated
attributeChanged: function(attrName, oldVal, newVal) { },
// Response from JSONP Data Changed Event Handler
responseChanged: function() {
// Get the Entry Point for the JSON Feed
var entries = this.response.feed.entry;
// Create an empty variable to store the video group
var videos = [];
// Push entries from the JSON feed onto the videos array
for (var i = 0, entry; entry = entries[i]; ++i) {
videos.push({
name: entry.gsx$name.$t,
id: entry.gsx$id.$t
});
}
// Set the video group object's array to this newly supplied video array
this.videos = videos;
}
});
</script>
</polymer-element>
但是，我不仅希望将这些视频显示在iframe中，还希望它们显示在由Slick驱动的轮播中，所以我打算针对以下内容进行一些操作:
But, rather than just displaying each video inside an iframe, I want those to appear in a carousel, powered by Slick, so I'm envisioning doing something vis-a-vis the following:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
<script src="../bower_components/slick-carousel/slick/slick.js"></script>
我是否必须创建一个包含slick功能的自定义元素，还是可以像上面的示例一样直接使用资产?
Do I have to create a custom element that wraps the functionality of slick or can I directly use the assets like the above example?
更新: 我创建了一个"elements/slick-import.html"文件，其中包含Slick需要的三件事:
UPDATE: I created an "elements/slick-import.html" file that includes the 3 things Slick needs:
<link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"/>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/slick-carousel/slick/slick.js"></script>
在我的elements/video-group.html元素中，我这样引用它: ... ...
In my elements/video-group.html element, I reference it as such: ... ...
我注意到页面的包含slick.css文件，但是页面加载时Slick所需的其他2个js文件未附加到DOM.我在slick-import.html中正确引用了包含的脚本吗?
I notice that the of the page contains the slick.css file, but the other 2 js files Slick requires are not being attached to the DOM when the page loads. Am I referencing the included scripts correctly in slick-import.html?
更新2: 这是我真正的问题:我有一个重复的模板，可以打印出我根据jsonp响应构建的视频列表:
UPDATE 2: Here's my real issue: I have this repeating template that prints out the video list that I construct from my jsonp response:
<div id="carousel">
<template repeat="{{video in videos}}">
<div>
<iframe width="420" height="315" src="//www.youtube.com/embed/{{video.id}}" frameborder="0" allowfullscreen></iframe>
</div>
</template>
</div>
但是绊倒的是，Chrome DevTools中的结果DOM显示了这样的标记:
But what is tripping up is that the resultant DOM in Chrome DevTools shows the markup as such:
<video-group>
<div id="carousel" class="slick-initialized slick-slider">
<template repeat="{{video in videos}}"></template>
<div>
<iframe width="420" height="315" src="//www.youtube.com/embed/Fp1wPwszF9M" frameborder="0" allowfullscreen=""></iframe>
</div>
<div>
<iframe width="420" height="315" src="//www.youtube.com/embed/H-l2cq-MXUs" frameborder="0" allowfullscreen=""></iframe>
</div>
<div class="slick-list draggable" tabindex="0" style="padding: 0px 50px;">
<div class="slick-track" style="width: 0px; -webkit-transform: translate3d(-832px, 0px, 0px); opacity: 1;"></div>
</div>
</div>
<!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing
https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml
-->
<polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&callback=" response="{{response}}"></polymer-jsonp>
</video-group>
请注意div#carousel如何具有平滑初始化"和平滑滑块"类.这意味着我的Slick Carousel可以正确地作用在我的div#carousel DOM元素上，但是由于嵌套在下面的模板标签缠绵，这使Slick无法进行一些漂亮的简单DIV操作，如
Notice how the div#carousel has a class of "slick-initialized" and "slick-slider". This means that my Slick Carousel is properly acting on my div#carousel DOM element, but because of the lingering template tag nested underneath, that is tripping up Slick from having some nice clean simple DIVs to act upon, like the example in the Slick docs demonstrates:
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
无论如何，我可以通过特定于聚合物的方法来解决此问题，或者以某种方式修改Slick以仅将div#carousel下的子div定位为目标吗?
Is there anyway I can workaround this, either through a Polymer-specific method or modify Slick somehow to target only child divs underneath div#carousel?
推荐答案
我不知道slick的工作原理，但是如果您想让您的元素确保第三方库被加载，最好创建一个导入文件该脚本文件. 在此处提出了类似的问题.
I don't know the specifics of how slick works but if you want your element to ensure that a third party library gets loaded it's probably best to create an import for that script file. Similar question was asked over here.
这篇关于在Polymer元素内使用外部脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
