如何将 javascript 代码结果返回到聚合物自定义元素的 <template>？

Question

已解决

我接受了@akc42 在下面发布的答案，并在getViews 函数定义之前添加了var self = this;，并将代码中的this 更改为self（并将self 添加到ytr 中，就像@987654327 @也是）

/已解决

我正在尝试从我的 youtube 频道获取观看次数。我要做的就是将计算结果返回给<p id="views"></p> 和<p id="youtubeRequest"></p>。

我有这个代码：

<template>
   ...   
  <div>                      
      <p id="views" style="display:inline; ">100/Amount of views:</p>
      <p id="youtubeRequest" style="display:inline">Amount of views:</p>
  </div>
  ... 
</template>

 <script>
   Polymer({
     is: 'my-view1',

     ready: function()
     {
       function getViews(params) {
         $.ajax({
           url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key=MyAPIkeyHere",
           jsonp: "callback",
           dataType: "jsonp",
           success: function(response) {
             this.ytr = this.$.youtubeRequest.innerHTML = response.items[0].statistics.viewCount;
             var ytr2 = this.$.views.innerHTML = 100 / ytr;
             this.ytr3 = ytr2.toPrecision(1);
             },
         });
       }
       getViews()
    }
 </script>
</dom-module>

我使用 this.$.id 而不是 document.getElementById("youtubeRequest")，因为它仅用于访问 Polymer 元素之外的项目。

我需要将计算值绑定到对应的<p>标签

Answer 1

您上面的代码显示了结束</dom-module>，但不是开始。您是否尝试定义 Polymer 元素。

如果是这样，您只需使用数据绑定。您也可以使用 ajax 调用，但先让另一部分工作。像这样的

<dom-module id="my-view1">
<template>
   ...  

  <div>                      
      <p id="views" style="display:inline; ">Amount of views: [[ytr]]</p>
      <p id="youtubeRequest" style="display:inline">[[ytr3]]</p>
  </div>
  ... 
</template>

 <script>
   Polymer({
     is: 'my-view1',
    properties: {
        ytr: {
            type: Number,
            value: 0
        },
        ytr3: {
            type: Number,
            value: 0
        }
    },
     ready: function()
     {
       function getViews(params) {
         $.ajax({
           url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key=MyAPIkeyHere",
           jsonp: "callback",
           dataType: "jsonp",
           success: function(response) {
             this. ytr = this.$.youtubeRequest.innerHTML = response.items[0].statistics.viewCount;
             var ytr2 = this.$.views.innerHTML = 100 / ytr;
             this.ytr3 = ytr2.toPrecision(1);
             },
         });
       }
       getViews()
    }
 </script>
</dom-module>