Question

假设我的index.html中包含一个JSON wad：

<!doctype html>
...
    <head>
        ...
        <!-- build:css styles/main.css -->        
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild-->

        <!-- Place your HTML imports here -->
        <script src="bower_components/platform/platform.js"></script>
        <link rel="import" href="elements/video-group.html">
    </head>
    <body>

        <script>

            videos:[
                 {
                    "name": "Mike Waters",
                    "id": "Fp1wPwszF9M"
                 },
                 {
                    "name": "Tom Valone",
                    "id": "H-l2cq-MXUs"
                 },
                 {
                    "name": "Wide Awake",
                    "id": "k0BWlvnBmIE"
                 },
                 {
                    "name": "Roar",
                    "id": "CevxZvSJLk8"
                 }
             ]

        </script>

        <!-- Slick Video Carousel -->
        <video-group data="{{videos}}"></video-group>

        <script>
        document.addEventListener('WebComponentsReady', function() {
            // Perform some behaviour

        });
        </script>

    </body>
</html>

如何在video-group元素中使用JSON wad生成视频轮播？我尝试在我的video-group元素上发布一个“data”属性，并通过双胡子括号传递它来说明我正在尝试的内容，但它不起作用。

我想可以提出一个更广泛的问题：只能将字符串传递给自定义元素属性吗？

更新：@ebidel再次帮助我，所以这是工作示例，直接在属性上传递数据：

<video-group data='[{"name": "Mike Waters","id": "Fp1wPwszF9M"},{"name": "Tom Valone","id": "H-l2cq-MXUs"},{"name": "Wide Awake","id": "k0BWlvnBmIE"},{"name": "Roar","id": "CevxZvSJLk8"}]'></video-group>

在我的视频组元素中，我更新了ready函数以评估传入的表达式，以便我可以实际使用数据：

ready: function(){                                
    this.data = eval(this.data) || []; 
},
dataChanged: function() {

    // Create the Carousel
    this.slick(this.data);
},
...
// Creates a Slick Carousel
slick: function(data) {

    // Slick it up!
    $('#carousel').slick({
        arrows: true,
        centerPadding: '50',
        dots: true,
        infinite: 'true'
    });

    // Add Slides
    data.forEach(function(element, index, array){            

        // Create a template for each slide
        var slideTemplate = $('<div><iframe width="420" height="315" src="//www.youtube.com/embed/' + array[index].id + '" frameborder="0" allowfullscreen></iframe></div>');

        // Append Each Slide to the Carousel
        $('#carousel').slickAdd(slideTemplate);

    });

这首先让我惹恼了一件事，我不确定它是否是一个聚合物的东西，但我不得不在我的模板中更新我的div＃carousel看起来像这样：

<div id="carousel" />

之前我只有一个标准/ div结束标签，并且由于某种原因添加了一个空子div，但是一旦我添加了自动关闭标签，它就消失了。奇怪吧？或者这是预期的聚合物模板行为？

Answer 1

如果正确提示已发布属性的类型，聚合物元素可以将对象/数组作为属性。例如：

<roster-list persons='[{"name": "John"}, {"name": "Bob"}]'></roster-list>

更多信息： http://www.polymer-project.org/docs/start/usingelements.html#objectarray

您可以做的另一件事是在运行时设置属性：

<video-group id="videog"></video-group>
<script>
  var videos = [...];
  document.addEventListener('polymer-ready', function() {
    document.querySelector('#videog').data = videos;
  });
</script>

注意：我在这里使用polymer-ready event。 WebComponentsReady仅适用于vanilla自定义元素。

从子Polymer元素访问主机（或父）JSON数据

1 个答案: