Data binding 聚合：两个自定义元素之间的数据绑定_Data Binding_Polymer

Data binding 聚合：两个自定义元素之间的数据绑定

data-binding polymer

Data binding 聚合：两个自定义元素之间的数据绑定,data-binding,polymer,Data Binding,Polymer,我有一个名为“datasource.html”的自定义元素，它使用iron ajax加载json。现在，我想将JSON数据转换为“app.html”，并最终转换为“categories.html” 然后在app.html中，我想使用相同的myattr值并将其传输到categories.html 现在，datasource.html在屏幕上打印数据，但categories.html在页面上什么也不显示我想要的是在datasource.html中加载数据一次，然后在项目中的任何位置使用数据。在过

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

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

现在，datasource.html在屏幕上打印数据，但categories.html在页面上什么也不显示

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

在过去的两天里一直在努力解决这个问题。还是一无所获

提前谢谢

这是我的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>


聚合物({
is:“lg数据源”，
});

这是我的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>


[[myAttr]]
聚合物({
是：“lg应用程序”，
});

这里是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>


我叫曼尼克
聚合物({
是：“lg类别”，
});

使用is=“dom repeat”元素中的项时，请使用双花括号{{}。因此，将其更改为：

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

使用is=“dom repeat”元素中的项时，请使用双花括号{{}。因此，将其更改为：

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

我只浏览了你的代码，但我也遇到了同样的问题，。。。作为数据源的子元素和应该显示它的父元素。为了使数据绑定正常工作，我需要在子对象中调用_setPropertyName（数据）。似乎找不到这是在哪里记录的，但iron ajax内部就是这样做的（查看“加载”属性）。

我只浏览了您的代码，但我遇到了同样的问题，。。。作为数据源的子元素和应该显示它的父元素。为了使数据绑定正常工作，我需要在子对象中调用_setPropertyName（数据）。似乎找不到这是在哪里记录的，但在iron ajax内部就是这样做的（查看“加载”属性）。

您正在混合Polymer 1.0语法和Polymer 0.5语法。尝试重写这些代码以匹配1.0版的代码。感谢您的回复@Neil。我对聚合物很陌生。你能具体说明我在哪里使用了0.5的语法吗？你把Polymer 1.0的语法和Polymer 0.5的语法混在一起了。尝试重写这些代码以匹配1.0版的代码。感谢您的回复@Neil。我对聚合物很陌生。你能具体说明我在哪里使用了0.5的语法吗？你把Polymer 1.0的语法和Polymer 0.5的语法混在一起了。尝试重写这些代码以匹配1.0版的代码。感谢您的回复@Neil。我对聚合物很陌生。您能指定我在哪里使用了0.5的语法吗？