Question

最终我想将模板绑定到树模型，但为了理解绑定如何工作超出对象属性（简单或链接），列表和地图，我创建了一组两级重复模板绑定到相应的Dart模型。外部列表中的每个项目都包含一个内部列表。

o1
  a
  b
o2
  c
  d

当我选择内部项目时（例如＆＃39; d＆＃39;），点击处理程序会突出显示该项目，并附加一个内部对象＆＃39; e＆＃39;到了＆＃39; o2＆＃39;外部对象的列表。在调试器中检查模型显示＆＃39; e＆＃39;已被添加到模型中，但它没有添加为＆＃39; li＆＃39;元素到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')])),

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

1 个答案: