Question

我是聚合物的新手，我仍然只是想弄清楚，但我被卡住了。

我有以下代码（这是在主文档中）：

<script type="text/javascript" src="/client.js"></script>
<template id="banner" is="dom-bind"> 
  <page-section>
    <section-title value="Banner"></section-title>    
    <section-content>
      <script> console.log(CLIENT); </script>
      <template is="dom-repeat" items="{{CLIENT.sections}}">
        <span>{{item.title}}</span>
      </template>
    </section-content>
  </page-section>
</template>

这是client.js：

var CLIENT = (function () { 
  return Object.freeze({
    sections: [ 
      {title:"hello", id:"blah"}, 
      {title:"goodbye", id:"foo"}
    ]});
}());

我知道正在加载CLIENT，因为数组已记录到控制台，但没有跨页呈现在页面上。我在这里做错了什么？

Answer 1

您不需要执行item，因为#banner是数组项的默认名称。但您需要确保网络组件已准备就绪，并将正确的数据分配到client.js模板。

因此，在document.addEventListener('WebComponentsReady',function(){ document.querySelector('#banner').CLIENT = Object.freeze({ sections: [ {title:"hello", id:"blah"}, {title:"goodbye", id:"foo"} ]}); });文件中，执行此操作 -

CheckBox

查看有效的演示here。

在dom-bind模板中使用repeat helper

1 个答案: