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

Question

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

在我的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>

我怎么能做到这一点？

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> 

资料来源:

• https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-serialization
• https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content