Polymer Topeka 示例中的数据流

Question

理解 Polymer Topeka 示例需要帮助 (https://github.com/polymer/topeka)。包含在 topeka-app 元素中的 topeka-category 元素具有属性和绑定 {{category}} 但我不明白是什么提供了 "category" 变量的值。数据必须来自 categories.json，我确实在 index.html 中看到了这个 topeka-datasource 元素，但我似乎无法弄清楚数据是如何进入类别对象（而不是类别) 用于托皮卡类别元素。

Index.html 包括：

<topeka-datasource url="bower_components/topeka-elements/categories.json" user="{{user}}" categories="{{categories}}" connected="{{connected}}"></topeka-datasource>

托皮卡-app.html 包括：

<polymer-element name="topeka-app" attributes="user categories" vertical layout>
 <template>
    <topeka-category id="category" name="category" user="{{user}}" category="{{category}}" allScores="{{allScores}}" wide="{{wide}}"></topeka-category>    // notice a binding called category appears here, although there is no attribute or property of this name in the Polymer script
 </template>
 <script>
   Polymer('topeka-app',{
        categorySelect: function() {
        if (this.category) {          // can't figure out where the code that pulls data from categories.json to put data into this object.
          var n = this.category.name;
          if (n === 'leaderboard') {
            this.showLeaderboard();
          } else if (n === 'profile') {
            this.showProfile();
          } else {
            this.showCategory();
          }
        }
      }
    )
 </script>
</polymer-element>

摘自托皮卡-category.html

<polymer-element name="topeka-category" attributes="user category selected wide allScores" vertical layout> // This has a "category" attribute, but again I'm not sure where this is coming from.

<script>

Polymer('topeka-category', {

created: function() {
  this.scores = [];
  this.category = {quizzes: []};  // This is all 'this.category' gets when the element is created, but eventually some content of categories.json goes into this object.
.....
})
 </script>
</polymer-element>

Answer 1

正在查看https://github.com/Polymer/topeka-elements/tree/9e72ec24b6bea4a86c07e8c9580f8463769566a4

编辑： 将 link 更改为特定的 git 提交，以防 Topeka 为未来的 Polymer 版本更新。

topeka-datasource 正在通过以下 javascript.

标记它所采用的属性

Polymer('topeka-datasource', {
  publish: {
    user: null,
    categories: null,
    url: ''
  },

这基本上只是一种表达聚合物元素具有哪些属性的命令方式。

topeka-datasource 有一个子元素

<core-ajax auto handleAs="json" url="{{url}}" response="{{categories}}"></core-ajax>

core-ajax 是一个非常有用的元素，它可以加载 JSON 并在收到响应时将其直接加载到聚合物表达式中。在此示例中，它会在 core-ajax 准备就绪后立即自动加载它，并将其反馈给由 topeka-datasource.

发布的 {{categories}}

在索引中

<template is="auto-binding">
<topeka-datasource url="components/topeka-elements/categories.json" user="{{user}}" categories="{{categories}}" connected="{{connected}}"></topeka-datasource>
<topeka-app fit user="{{user}}" categories="{{categories}}" connected="{{connected}}" touch-action="auto"></topeka-app>
</template>

代码包含在自动绑定模板中，因为 topeka-datasource 和 topeka-app 标签不包含在聚合物元素中，数据绑定只能发生在无论是聚合物元素，还是绑定模板，自动绑定都可以让这种情况发生而无需引用另一个模板。

因此 core-ajax 将 json 加载到已发布的 {{categories}} 中，因此可以通过 parent/children（聚合物元素/绑定模板）访问 topeka-然后应用采用 {{categories}} 聚合物表达式。

为 topeka-datasource 和 topeka-app 生成了一个观察者来观察和通知元素对自动绑定模板类别对象的任何更改。

因此在托皮卡类别中，无论何时选择一个类别， https://github.com/Polymer/topeka-elements/blob/40e3c88a69f2095a29548cfb34b22d1b1022510e/topeka-categories.html#L118

selectedChanged: function() {
  // first one is leaderboard, last one is profile
  if (this.selected === 0) {
    this.category = {name: 'leaderboard'};
  } else if (this.selected === this.categories.length + 1) {
    this.category = {name: 'profile'};
  } else {
    this.category = this.categories[this.selected - 1];
  }

this.category 绑定到 {{category}} 表达式。

Polymer Topeka 示例中的数据流

Data flow in Polymer Topeka example

polymer