Блог

Главная - Вопросы по программированию - Ajax запрашивает передачу данных между компонентами

Ajax запрашивает передачу данных между компонентами

#javascript #polymer

#javascript #полимер

Вопрос:

Я пытаюсь получить результаты темы reddit из запроса AJAX, и, похоже, мой текущий подход к передаче результатов posts неверен.

В настоящее время я создал три веб-компонента, отдельную службу для запросов ajax, которая передает ответ через атрибут. Отдельный компонент поиска, который имеет поле ввода текста, изменяет категорию для «службы». Компонент поиска передает записи в службу листинга.

Проблема заключается в передаче данных posts из компонента поиска в компонент списка.

reddit-post-service.html

 <link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-ajax/core-ajax.html">

<polymer-element name="reddit-post-service" attributes="posts subreddit">

  <template>
    <style>
    :host {
      display: none;
    }
    </style>

    <core-ajax id="ajax"
      url="http://www.reddit.com/r/{{subreddit}}/new.json"
      on-core-response="{{postsLoaded}}"
      on-core-error="{{handleError}}"
      auto
      handleAs="json">
    </core-ajax>

  </template>
  <script>
  Polymer('reddit-post-service', {

    created: function() {
      console.log('Reddit post service created');

      this.posts = [];
    },

    postsLoaded: function() {
      // Make a copy of the loaded data
      this.posts = this.$.ajax.response.data.children
      .map(function (post) {
        return post.data;
      });
    },

    handleError: function () {
      this.posts = [];
    }
  });
  </script>
</polymer-element>

reddit-search.html

 <link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-input/paper-input.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="reddit-post-service.html">

<polymer-element name="reddit-search" attributes="posts">
  <template>
    <style>
      paper-button.search {
        background-color: #19D820;
      }
    </style>

    <paper-input label="subreddit name" tabindex="0" value="{{subreddit}}"></paper-input>
    <paper-button label="Search" tabindex="1" class="search"></paper-button>

    <reddit-post-service subreddit="{{subreddit}}" posts="{{posts}}"></reddit-post-service>
  </template>
  <script>
    Polymer('reddit-search', {

      subreddit: 'programming',

      // initialize the element's model
      ready: function() {

      } 
    });
  </script>
</polymer-element>

post-list.html

 <link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">

<polymer-element name="post-list" attributes="show posts">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    </style>

      <div layout vertical center>
        <template repeat="{{post in posts}}">
          <!-- Never reach this block -->
          <span>{{post}}</span>
        </template>
      </div>
  </template>

  <script>
  Polymer({
  });
  </script>

</polymer-element>

index.html

 <!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../components/platform/platform.js"></script>
  <link rel="import" href="../components/font-roboto/roboto.html">
  <link rel="import" href="../components/core-header-panel/core-header-panel.html">
  <link rel="import" href="../components/core-toolbar/core-toolbar.html">
  <link rel="import" href="../components/paper-tabs/paper-tabs.html">
  <link rel="import" href="../components/paper-tabs/paper-tabs.html">


  <link rel="import" href="post-list.html">
  <link rel="import" href="reddit-search.html">
  <link rel="import" href="name-tag.html">
  <style>
</head>

<body unresolved>
  <core-header-panel>

    <core-toolbar>
      <paper-tabs valueattr="name" selected="new" self-end>
        <paper-tab name="new">NEW</paper-tab>
        <paper-tab name="favorites">FAVORITES</paper-tab>

      </paper-tabs>

      <reddit-search posts="{{posts}}"></reddit-search>
    </core-toolbar>

  <!-- <name-tag></name-tag> -->
    <!-- main page content will go here -->
  <div class="container" layout vertical center>
    <post-list show="all" posts="{{posts}}"></post-list>
  </div>

  </core-header-panel>

  <script>

  </script>
</body>

</html>

Ответ №1:

Привязка данных через ‘{{ }}’ работает только в контексте шаблона. Ваши index.html попытки использовать привязку вне шаблона.

Вы можете исправить это, сделав ваше основное приложение самим собой polymer-element , используя какую-либо другую систему для распространения данных или используя auto-binding шаблон, подобный этому:

   <template is="auto-binding">
    <core-header-panel flex>
      <core-toolbar>
        <paper-tabs valueattr="name" selected="new" self-end>
          <paper-tab name="new">NEW</paper-tab>
          <paper-tab name="favorites">FAVORITES</paper-tab>
        </paper-tabs>
        <reddit-search posts="{{posts}}"></reddit-search>
      </core-toolbar>
      <div class="container" layout vertical center>
        <post-list show="all" posts="{{posts}}"></post-list>
      </div>
    </core-header-panel>
  </template>

См. http://jsbin.com/xahoc/2/edit

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

1. Спасибо, это отлично работает. Как вы думаете, должен ли компонент ajax быть более слабо связан, поскольку в настоящее время он тесно связан с компонентом поиска?

Метки: