[英]Template repeat not working for nested list (Polymer.dart)
Due to the lack of multi-dimensional array support in dart, I thought of using List. 由于dart中缺乏多维数组支持,因此我想到了使用List。
Dart code : 飞镖代码:
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 file (snippet): 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>
Error I get in console: 我进入控制台时出错:
Uncaught Error: Error evaluating expression 'row': Class 'MyModel' has no instance getter 'row'.
NoSuchMethodError: method not found: 'row'
Receiver: Instance of 'MyModel'
Arguments: []
When I added a 'row' list variable in MyModel with a getter, it throws the following error : 当我在MyModel中使用吸气剂添加“行”列表变量时,它将引发以下错误:
Uncaught Error: Unsupported operation: can't eval an 'in' expression 未捕获的错误:不支持的操作:无法评估'in'表达式
My understanding of template repeat was wrong. 我对模板重复的理解是错误的。 The repeat clause is to be applied for the the element itself, and not the children.
repeat子句将应用于元素本身,而不是子元素。 This fixed the problem :
这解决了问题:
<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>
And the updated dart code : 和更新的飞镖代码:
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()
}
I am marking the question as resolved because my specific problem was resolved. 我将问题标记为已解决,因为我的特定问题已解决。 But the question still remains what if we actually want to repeat table elements !
但是问题仍然存在,如果我们实际上想重复表元素呢?
You assign the model to the template and only afterwards add the data. 将模型分配给模板,然后再添加数据。
I guess you need to make the inner lists observable too. 我想您也需要使内部列表可见。
List<int> in1 = toObservable(new List<int>());
or a bit shorter 或短一点
List<int> in1 = toObservable(<int>[]));
But the error message seems to point more to this issue http://dartbug.com/12742 但是错误消息似乎更多地指向了这个问题http://dartbug.com/12742
Can you please try if it works inside a Polymer element instead of AutoBindingElement. 您能否尝试一下它是否在Polymer元素而不是AutoBindingElement中起作用。
Normally you don't add repeat
on an element. 通常,您不会在元素上添加
repeat
。 Normally you use 通常你用
<template repeat="{{x in y}}">
<!-- repeate this y.length times -->
</template>
There are exceptions. 也有例外。 For example
<ul>
, <tr>
, and a few others, 例如
<ul>
, <tr>
以及其他一些,
because browsers do not allow HTML like 因为浏览器不允许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>
As a workaround for such situations 作为此类情况的解决方法
<table>
<tr repeat="{{x in y}}"> <!-- here not the children but the element itself is repeated -->
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.