由于dart缺乏多维数组支持,我想到了使用List。
Dart代码:
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中添加一个带有getter的'row'列表变量时,会抛出以下错误:
未捕获错误:不支持的操作:无法评估'in'表达式
答案 0 :(得分:3)
我对模板重复的理解是错误的。 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()
}
我将问题标记为已解决,因为我的具体问题已得到解决。但如果我们真的想重复表格元素,问题仍然存在!
答案 1 :(得分: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>
和其他一些,
因为浏览器不允许像
<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>