5

我带着新问题回来了，再次寻求专家帮助！

在我的 Polymer 0.5 项目中，我有一个 JSON 数组传递给这样的属性：

<horizontal-barset max="3320000" data='[
{"title": "Annuals", "prevord": "1-15-2015",
  "ds": [
  {"subhead": "Last Year Sales", "value": "2960000", "className" : "last-year"},
  {"subhead": "YTD", "value": "1956000", "className" : "ytd"},
  {"subhead": "Previous Order", "value": "480000", "className" : "prev-order"}
  ]
},
{"title": "Perennials", "prevord": "1-15-2015",
  "ds": [
  {"subhead": "Last Year", "value": "540000", "className" : "last-year"},
  {"subhead": "YTD", "value": "2140000", "className" : "ytd"},
  {"subhead": "Previous Order", "value": "320000", "className" : "prev-order"}
  ]
},
{"title": "Totals", "prevord": "1-15-2015",
  "ds": [
  {"subhead": "Last Year", "value": "3320000", "className" : "last-year"},
  {"subhead": "YTD", "value": "1350000", "className" : "ytd"},
  {"subhead": "Previous Order", "value": "1700000", "className" : "prev-order"}
  ]
}
]'>
</horizontal-barset>

在元素中，我created像这样初始化了里面的空数组：

created: function(){
  this.data=[];
}

使用 Polymer 1.0，属性现在以不同的方法编写：

properties: {
  max: {type: String},
  data: [] //(not sure this is the corrent approach! I also tried data: Object)
}

然后像 0.5 一样，我尝试以类似的方式初始化空对象，但data is undefined在 JavaScript 控制台中出现（请参阅随附的屏幕截图）错误。

这是我用来初始化 JSON 数组的片段：

created: function(){
  this.data = [];
}

迭代是这样写在元素内部的：

<template is="dom-repeat" items="{{data}}">
  <div class="rack-container">
    <p>{{item.title}}</p>
    <template is="dom-repeat" items="{{item.ds}}">
      <div class="rack">
        <div class="rack-bar">
          <div class="rack-head">
            {{item.subhead}}
          </div> 
          <!--<span style="width:{{ (row.value / max) * 100}}%;line-height:2em;" class="{{row.className}} rack-fill">&nbsp;</span>-->
          <div class="clear"></div>
        </div>
      <div class="rack-value">{{item.value}}</div>
      <div class="clear"></div>
  </div>
</template>
          </div>
      </template>

在此处输入图像描述

我怎样才能做到这一点？

4

1 回答 1

6

你实际上是在正确的轨道上！以下是声明数组属性的方法：

properties: {
  max: {type: String},
  data: {
    type: Array, // Available property types are String, Number, Boolean, Array, and Object
    value: function () { return []; } // Default value
  }
}

但是，在您的数据绑定模板上，您必须确保tag 内没有空格。基本上，你必须重写这行

<div class="rack-head">
  {{item.subhead}}
</div>

对此

<div class="rack-head">{{item.subhead}}</div>

资料来源：

于 2015-06-09T06:59:04.630 回答