Как вернуть результат кода javascript в пользовательского элемента polymer?

#javascript #polymer #polymer-1.0 #shadow-dom #custom-element

#javascript #полимер #polymer-1.0 #shadow-dom #пользовательский элемент

Вопрос:

РЕШАЕМАЯ

Я взял ответ, который @akc42 опубликовал ниже, и добавил var self = this; перед getViews определением функции и изменил this на self in code (и добавил self к ytr тому 100 / self.ytr же)

/ РЕШАЕМАЯ

Я пытаюсь получить количество просмотров на своем канале 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=statisticsamp;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> тегам

Комментарии:

1. response.items должен вернуться undefined .

2. Но что это значит? Я новичок в веб-разработке, и я не уверен, что с этим делать

3. Каков ответ, консоль. запишите это или что-то в этом роде

4. Это означает, что он не существует

5. @Un1 если вы попытаетесь получить значение, которого не существует, вы получите undefined . Вот и все.

Ответ №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=statisticsamp;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>
  

Комментарии:

1. ytr3 уже должен быть ytr /100. В моем примере была опечатка, в которой был пробел между этим. и ytr3, просто удалите его.

2. Спасибо, это решило проблему! Просто нужно было добавить self к нему var