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

【问题标题】：POLYMER: Data binding between two custom elementsPOLYMER：两个自定义元素之间的数据绑定
【发布时间】：2015-06-30 16:55:53
【问题描述】：

我有一个名为“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>

【问题讨论】：

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

标签： data-binding polymer

【解决方案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
  }

});

【讨论】：

【解决方案2】：

我只浏览了您的代码，但我遇到了同样的问题，......作为数据源的子元素和应该显示它的父元素。为了让数据绑定起作用，我需要在子进程中调用 _setPropertyName(data)。似乎无法找到记录在哪里，但这就是它在 Iron-ajax 内部完成的方式（查看“加载”属性）。

【讨论】：