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 バインディング デリゲートを使用する必要があります。これはポリマー要素のデフォルトですが、手動で作成されたテンプレートのデフォルトではありません
  • フィルター関数は List ではなく 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 に答える