Question

我们正在使用Polymer开发数据可视化库，我必须说我对Polymer所做的事情印象深刻。我们确实有一个问题，但是......

首先：这是一个显示数据可视化的代码片段：

<template is="auto-binding">
    <our-loaddata url="data/data.csv" data="{{data}}"></our-loaddata>
    <our-scatterplot data="{{data}}"></our-scatterplot>
    <our-barchart data="{{data}}" dimension="weight"></our-barchart>
    <our-histogram data="{{data}}" dimension="weight" binSize=10></our-histogram>
</template>

our-loaddata从文件data/data.csv加载数据集，执行一些转换（例如将字符串转换为数字，计算分布，......）并通过{{data}}将其提供给our-scatterplot，our-barchart和our-histogram。但是，我对设置并不完全满意。从概念上讲，our-loaddata与其他三个不同，和应该在它们之前。作为替代方案，我们还尝试了以下操作（将loaddata重命名为app并在应用内嵌套所有视觉效果）：

<template is="auto-binding">
    <our-app url="data/data.csv" data="{{data}}">
        <our-scatterplot data="{{data}}"></our-scatterplot>
        <our-barchart data="{{data}}" dimension="weight"></our-barchart>
        <our-histogram data="{{data}}" dimension="weight" binSize=10></our-histogram>
    </our-app>
</template>

虽然这也有效，但我们注意到，如果我们在所有视觉元素之前或之后关闭</our-app>元素并不重要。

在Polymer中处理这个问题最常规的方法是什么？我在这里展示的方法之间有什么区别？

Answer 1

您可以使用条件模板检查数据是否存在，然后将其他元素发送到dom（如果为true）或显示加载器（如果为false）。（小心习惯这个我不认为它目前在0.8。悲伤的IMO我＆lt; 3它）

<template is="auto-binding">
  <our-loaddata url="data/data.csv" data="{{data}}"></our-loaddata>
  <template if="{{data}}">
    <our-scatterplot data="{{data}}"></our-scatterplot>
    <our-barchart data="{{data}}" dimension="weight"></our-barchart>
    <our-histogram data="{{data}}" dimension="weight" binSize=10></our-histogram>
  </template>
  <template if="{{!data}}">
    <pretty-loadingscreen></pretty-loadingscreen>
  </template>
</template>

这会让你分离你正在寻找的元素。

聚合物元素：嵌套还是不嵌套？

1 个答案: