Связывание дерева в шаблоне дротика-полимера

Я пытаюсь сделать дерево из списка объектов с помощью шаблонов, но я не могу заставить его работать. Если есть лучший способ, я также заинтересован в этом.Связывание дерева в шаблоне дротика-полимера

Он работает без ошибок, но ничего не отображается.

Вот 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,[])); 

}

Что я делаю неправильно?

Большое спасибо

источник

2013-09-12 eesdil

Есть несколько ошибок здесь:

во-первых, вы не создаете экземпляр шаблона. Вы должны назначить модель элементу шаблона, чтобы сделать это
, вы должны использовать делегат, связывающий PolymerExpressions, если вы хотите использовать функции в ваших выражениях привязки. Это значение по умолчанию для полимерных элементов, но не для шаблонов, созданных вручную.
Функции вашего фильтра не возвращают список, но поле «Неправильное использование»
неверно. Если повторить через результат GetRoot() функции, ожидается, что GetChildren (имя) будет членом пункта

Это должно работать лучше:

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-13 09:05:50 Lesiak

спасибо @Lesiak работает лучше :) – eesdil

Как бы выглядела обновленная версия этого вида ('ObservableBase', похоже, устарел)? – umop

Связывание дерева в шаблоне дротика-полимера

ответ

Смежные вопросы