如何将重复的嵌套模板绑定到复杂模型

Question

最终我想将模板绑定到树模型，但为了了解绑定在对象属性（简单或链式）、列表和映射之外的工作原理，我创建了一个两级重复模板集，绑定到相应的飞镖模型。外部列表中的每个项目都包含一个内部列表。

o1
  a
  b
o2
  c
  d

当我选择一个内部项目（例如“d”）时，单击处理程序会突出显示该项目并将一个内部对象“e”附加到“o2”外部对象的列表中。在调试器中检查模型显示“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

你的内心也需要toObservable()

new Outer('o1', toObservable([ new Inner('a'), new Inner('b')])),