模板重复不适用于嵌套列表（Polymer.dart）

Question

由于dart中缺乏多维数组支持，因此我想到了使用List。

飞镖代码：

class MyModel extends Object with Observable {
@observable
List<List<int>> dataList = toObservable(new List<List<int>>());
}

void main() {
  initPolymer().run(() {
    Polymer.onReady.then((_) {
      var template = querySelector("#bindValueTemplate") as AutoBindingElement;
      var model = template.model = new MyModel();

      for (int i=0; i<2;i++) {
        List<int> in1 = new List<int>();
        for (int j=0; j<2; j++) {
          in1.add(j);
        }
        model.dataList.add(in1);
      }

    });
  });
}

HTML文件（摘要）：

<body fullbleed touch-action="auto">
 <template id="bindValueTemplate" is="auto-binding-dart">
    <div id="dynamic_area" layout horizontal>
       <table template repeat="{{row in dataList}}">
           <tr template repeat="{{col in row}}">
              <td>{{col}}</td>
           </tr>
       </table>
    </div>
 </template>

</body>

我进入控制台时出错：

Uncaught Error: Error evaluating expression 'row': Class 'MyModel' has no instance getter 'row'.
NoSuchMethodError: method not found: 'row'
Receiver: Instance of 'MyModel'
Arguments: []

当我在MyModel中使用吸气剂添加“行”列表变量时，它将引发以下错误：

未捕获的错误：不支持的操作：无法评估'in'表达式

Answer 1

我对模板重复的理解是错误的。 repeat子句将应用于元素本身，而不是子元素。 这解决了问题：

<body fullbleed touch-action="auto">
 <template id="bindValueTemplate" is="auto-binding-dart">
    <div id="dynamic_area" layout horizontal>
       <table>
           <tr template repeat="{{row in dataList}}">
              <td template repeat="{{col in row}}">{{col}}</td>
           </tr>
       </table>
    </div>
 </template>

</body>

和更新的飞镖代码：

class MyModel extends Object with Observable {
@observable
List<List<int>> dataList = toObservable(new List<List<int>>());
@observable
List<int> row = [];      //I don't know why it works even without toObservable()
}

我将问题标记为已解决，因为我的特定问题已解决。 但是问题仍然存在，如果我们实际上想重复表元素呢？

Answer 2

将模型分配给模板，然后再添加数据。

我想您也需要使内部列表可见。

List<int> in1 = toObservable(new List<int>());

或短一点

List<int> in1 = toObservable(<int>[]));

但是错误消息似乎更多地指向了这个问题http://dartbug.com/12742

您能否尝试一下它是否在Polymer元素而不是AutoBindingElement中起作用。

编辑

通常，您不会在元素上添加repeat 。 通常你用

<template repeat="{{x in y}}">
  <!-- repeate this y.length times -->
</template>

也有例外。 例如<ul> ， <tr>以及其他一些，
因为浏览器不允许HTML之类的

<table>
  <!-- this template element is just dropped by some browsers because 
       only some specific elements are allowed inside a `<table>` element. -->
  <template repeat="{{x in y}}">
    <tr>
    </tr>
  <!-- repeate this y.length times -->
</template>

作为此类情况的解决方法

<table>
  <tr repeat="{{x in y}}"> <!-- here not the children but the element itself is repeated -->
  </tr>
</table>

模板重复不适用于嵌套列表（Polymer.dart）

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-08-29 22:48:59

解决方案2
2 2014-08-29 21:05:48

编辑

模板重复不适用于嵌套列表（Polymer.dart）

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-08-29 22:48:59

解决方案2 2 2014-08-29 21:05:48

编辑

解决方案1
3 已采纳 2014-08-29 22:48:59

解决方案2
2 2014-08-29 21:05:48