Question

我正在尝试创建一个显示通知的自定义元素。这里我在模板部分使用了一个选框标记。我的通知是在JSON文件中。通知有两个属性。标题和链接。标题使用li标签显示，每个li都有链接属性的链接。即

<li><a href="link">title</a></li>

如何从JSON文件加载通知并将其添加到

<ul></ul> in <marquee>

我的聚合物元素代码如下

<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<polymer-element name="notification-center">

<template>
<style>    
  #marquee {
    padding: 0px;
    margin: 0px;
  }
  #paper_fab {
    left: 810px;
    top: 270px;
    position: absolute;
  }
  #section {
    width: 400px;
    height: 350px;
    border: 5px solid rgb(204, 204, 204);
    left: 340px;
    top: 100px;
    position: absolute;
    border-radius: 5px;
   background:url(http://www.advantagewebsitedesigndallas.com/wpimages/wp9979755e.png);
  }
  #paper_tabs {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    font-size: 18px;
    font-weight: bold;
    color: rgb(181, 237, 193);
  }
  #paper_tab {
    opacity: 1;
    background-color: rgb(75, 56, 64);
  }
</style>
<section id="section" layout vertical>
  <paper-tabs noink nobar selected="0" selectedindex="0" id="paper_tabs" horizontal center layout>
    <paper-tab id="paper_tab" inline center-center center horizontal layout center-justified four flex active>Notification Center</paper-tab>
  </paper-tabs>
  <marquee id="marquee" direction="up" height="350" width="400" onmouseout="this.setAttribute('scrollamount', 3, 0);" onmouseover="this.setAttribute('scrollamount', 0, 0);" scrollamount="3" scrolldelay="100" horizontal layout center center-justified wrap one flex>
    <ul id="ul">
      <li id="li">Hi</li>
      <li id="l2">Hi</li>
    </ul>
  </marquee>
</section>
</template>
<script>

Polymer({
  ready: function ()
  {



}
});

</script>

</polymer-element>

Answer 1

一种方法是添加一个core-ajax元素，并将位置设置为json文件路径。

<core-ajax location="path_to_json" handleAs="json" on-core-response="{{ populateItems }}"></core-ajax>

您将在核心响应处理函数中收到json数据。

Answer 2

从文档中的某处获取示例。在脚本部分，您可以找到HOWTO处理json的方法。

<html>
<head>

  <title>core-ajax</title>

  <script src="../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="core-ajax.html">

</head>
<body>

  <core-ajax auto url="//gdata.youtube.com/feeds/api/videos/" 
      params='{"alt":"json", "q":"chrome"}'
      handleAs="json"></core-ajax>

  <template repeat="{{response.feed.entry}}">
    <div>{{title.$t}}</div>
  </template>

  <script>
    document.addEventListener('polymer-ready', function() {
      var ajax = document.querySelector("core-ajax");
      ajax.addEventListener("core-response", 
        function(e) {
          document.querySelector('template').model = {
            response: e.detail.response
          };
        }
      );
    });
  </script>

</body>
</html>

如何将JSON日期插入模板

2 个答案: