Question

我正在尝试从AJAX请求获取reddit主题结果，看来我目前传递帖子结果的方法是错误的。

目前我已经创建了三个Web组件，为ajax请求提供单独的服务，这些请求通过属性传递响应。具有文本输入字段的单独搜索组件会更改＆＃39; service＆＃39;的类别。搜索组件将帖子传递给列表服务。

问题在于将搜索组件的帖子数据传递给列表组件。

书签交易-后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>

书签交易-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>

-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>

Answer 1

通过＆＃39; {{}}＆＃39;进行数据绑定仅适用于模板的上下文。您的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

Ajax请求组件之间传递数据

1 个答案: