반복되는 중첩 템플릿을 복잡한 모델에 바인딩하는 방법

Question

결국 템플릿을 트리 모델에 바인딩하려고하지만 바인딩이 개체 속성 (단순 또는 연결), 목록 및지도를 넘어서는 방식을 이해하는 방법을 알아보기 위해, 해당 다트 모델에 바인딩 된 반복 템플릿 세트. 외부 목록의 각 항목에는 내부 목록이 있습니다. 나는 내부 항목을 선택하면

o1 
    a 
    b 
o2 
    c 
    d 

(예 : 'D'에 대한), 클릭 핸들러는 항목을 강조하고 'O2'외부 개체의 목록에 내부 객체 'E'를 추가합니다. 디버거에서 모델을 검사하면 'e'가 모델에 추가되었지만 'li'요소로 HTML 목록에 추가되지 않고 있음을 알 수 있습니다. 내부 템플릿에서 변경 사항을 감지하도록 코드를 수정하려면 어떻게해야합니까?

HTML

<polymer-element name="nested-templates"> 
<template> 
    <style> 
     :host { display: block; height: 100%; } 

     ul { margin: 0; padding: 0; } 

     li { font-size: 0.85rem; padding-left: 0.75rem; } 
     li:hover { background: lightgrey; cursor: pointer; } 
     li.selected { color: red; } 
    </style> 

    <div> 
     <template repeat="{{o in outer}}"> 
      <strong>{{o.name}}</strong> 
      <ul> 
       <template repeat="{{i in o.inner}}"> 
        <li id="{{i.name}}" on-click="{{innerClickHandler}}">{{i.name}}</li> 
       </template> 
      </ul> 
     </template> 
    </div> 
</template> 

<script type="application/dart" src="nested_templates.dart"></script> 

다트

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

@CustomTag('nested-templates') 
class NestedTemplates extends PolymerElement { 

    @observable List<Outer> outer = toObservable([ 
      new Outer('o1', [ new Inner('a'), new Inner('b')]), 
      new Outer('o2', [ new Inner('c'), new Inner('d')]) 
    ], deep: true); 

    void innerClickHandler(Event e, Map detail, HtmlElement target) { 
     target.classes.add('selected'); 

     outer[1].inner.add(new Inner('e')); 
    } 

    NestedTemplates.created() : super.created(); 
} 

class Inner extends Observable { 
    String name; 

    Inner(this.name); 
} 

class Outer extends Observable { 
    String name; 
    List<Inner> inner; 

    Outer(this.name, this.inner); 
} 

는 pubspec.yaml

dependencies: 
    ... 
    polymer: 0.10.1+1 
    polymer_expressions: 0.11.0 
    ... 
dependency_overrides: 
    polymer_expressions: '0.11.0' 

Answer 1

당신은필요 귀하의 내부 용도