1

我正在尝试使用模板从对象列表中创建一棵树，但我无法让它工作。如果有更好的方法我也对它感兴趣。

它运行没有错误，但没有显示任何内容。

这是html： 

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <script src="packages/polymer/boot.js"></script>
  </head>
  <body>
   <ul>
    <template id="tmpl" repeat="{{ getRoot() }}">
     <li>{{ name }}
      <ul>
       <template ref="tmpl" repeat="{{ getChildren(name) }}"></template>
      </ul>
     </li>
    </template>    
   </ul>

  <script type="application/dart" src="test2.dart"\>

  </body>
 </html>

还有飞镖文件：

import 'package:polymer/polymer.dart';

class Item extends ObservableBase {
  @observable String name;
  @observable List<String> children;
  @observable int level;

  Item(this.name, this.level, this.children);
}
@observable List<Item> items;

List<Item> getRoot(){
  return items.where((t) => t.level == 0);
}

List<Item> getChildren(String name){
  Item item = items.singleWhere((t) => t.name == name);
  return items.where((t) => item.children.contains(t.name));
}

main() {

 items = new List();

  items.add(new Item('Smurfs',0,['Smurf1','Smurf2']));
  items.add(new Item('Smurf1',1,[]));
  items.add(new Item('Smurf2',1,[]));

}

我究竟做错了什么？

非常感谢

4

1 回答 1

1

这里有一些错误：

  • 首先，您不实例化您的模板。您必须将模型分配给模板元素才能执行此操作
  • 如果要在绑定表达式中使用函数，则必须使用 PolymerExpressions 绑定委托。这是聚合物元素的默认设置，但不是手动创建的模板
  • 您的过滤器函数不返回列表，而是返回 WhereIterable
  • 范围是错误的。如果您重复 getRoot() 函数的结果，则期望 getChildren(name) 将成为 Item 的成员

这应该会更好：

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:polymer_expressions/polymer_expressions.dart';

@observable List<Item> items;

class Item extends ObservableBase {
  @observable String name;
  @observable List<String> children;
  @observable int level;

  Item(this.name, this.level, this.children);

  List<Item> getChildren(String name){
    Item item = items.singleWhere((t) => t.name == name);
    return items.where((t) => item.children.contains(t.name)).toList();
  }
}

class MyModel extends ObservableBase {   
  List<Item> getRoot(){
    return items.where((t) => t.level == 0).toList();
  }    
}

main() {

  items = new List();
  items.add(new Item('Smurfs',0,['Smurf1','Smurf2']));
  items.add(new Item('Smurf1',1,[]));
  items.add(new Item('Smurf2',1,['Smurf3']));
  items.add(new Item('Smurf3',2,[]));

  TemplateElement templ = query("#tmpl");
  templ.bindingDelegate = new PolymerExpressions();
  MyModel m = new MyModel();
  templ.model = m;

}
于 2013-09-13T09:05:50.637 回答