Question

我有一个名为“datasource.html”的自定义元素，它使用iron-ajax加载json。现在，我想将JSON数据用于“app.html”并最终用于“categories.html”

然后在app.html中，我想使用myattr的相同值并将其传递给categories.html。

现在，datasource.html在屏幕上打印数据，但categories.html在页面上没有显示任何内容。

我想要的是我在datasource.html中加载数据一次，然后在项目的任何位置使用数据。

最近2天试图解决这个问题。仍然一无所获。

提前致谢。

这是我的index.html文件

<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

<link rel="import" href="lgelements/datasource.html">
<link rel="import" href="lgelements/app.html">
</head>

<body>
<dom-module id="landing-page" attributes="myattr">
    <template>
        <lg-datasource myattr="{{myattr}}"></lg-datasource>
        <lg-app myattr="{{myattr}}"></lg-app>
    </template>
</dom-module>
<script>
Polymer({
    is: "landing-page",
});
</script>
<landing-page></landing-page>
</body>

</html>

这是datasource.html

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="lg-datasource" attributes="myattr" hidden>
<template>
<iron-ajax url="../data.json" auto handleAs="json" last-response="{{myattr}}"></iron-ajax>
    <template is="dom-repeat" items="[[myattr]]">
        <a href="[[item.url]]" target="_blank">
            <h1>[[item.name]]</h1>
        </a>
    </template>
  </template>
</dom-module>
<script>
Polymer({
is: "lg-datasource",
});
</script>

这是我的app.html

<link rel="import" href="categories.html">
<dom-module id="lg-app" attributes="myattr" vertical layout>
<template is="auto-binding">

    <h1>[[myAttr]]</h1>
    <lg-categories myattr="{{myattr}}"></lg-categories>
</template>
</dom-module>

<script>
Polymer({
    is: "lg-app",
});
</script>

这里是categories.html

<dom-module id="lg-categories" attributes="myattr">
<template is="auto-binding">
<h2>MY NAME IS MANIK</h2>
    <template is="dom-repeat" items="{{myattr}}">
          <a href="[[item.url]]" target="_blank">
            <h1>[[item.name]]</h1>
        </a>
    </template>
</template>
</dom-module>
<script>
Polymer({
    is: "lg-categories",
});
</script>

Answer 1

当您使用is =“dom-repeat”元素内的项目时，请使用双花括号{{}}。所以改成它：

<template is="dom-repeat" items="{{myattr}}">
          <a href="{{item.url}}" target="_blank">
            <h1>{{item.name}}</h1>
        </a>
    </template>

此外，您应将 myattr 公开为属性，并删除datasource.html文件中的模板。

Polymer({
  is: "lg-datasource",
  properties : {
    myattr : Array
  }

});

Answer 2

我只是略过了你的代码，但我遇到了同样的问题，......一个子元素是数据源，而父元素应该显示它。为了使数据绑定起作用，我需要在子节点中调用_setPropertyName（data）。似乎无法找到记录的位置，但这就是它在iron-ajax内部的完成方式（查看“loading”属性）。

POLYMER：两个自定义元素之间的数据绑定

2 个答案: