Question

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

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

＆＃13;

<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>

＆＃13;

并在元素中初始化created内的空数组，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

以下是我用来初始化JSON数组的代码段：

＆＃13;

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

＆＃13;

迭代编写在元素中，如下所示：

＆＃13;

<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>

＆＃13;

enter image description here

我该如何做到这一点？

Answer 1

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

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

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

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

到这个

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

来源：

Polymer 1.0将JSON字符串作为proprty传递

1 个答案: