我正在尝试从 AJAX 请求获取 reddit 主题结果，看来我目前传递帖子结果的方法是错误的。
目前我已经创建了三个 Web 组件，分别为通过属性传递响应的 ajax 请求提供服务。 具有文本输入字段的单独搜索组件更改“服务”的类别。 搜索组件将帖子传递给列表服务。
问题在于将帖子数据从搜索组件传递到列表组件。
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>
最佳答案
通过“{{ }}”进行的数据绑定(bind)仅适用于模板上下文。您的 index.html 尝试在模板外部使用绑定(bind)。
您可以通过使主应用程序本身成为一个 polymer 元素、使用其他一些系统来传播数据或使用自动绑定(bind)模板来解决这个问题，像这样:
<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>
关于javascript - Ajax 请求数据在组件之间传递，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24471326/