Question

您好我似乎找不到使用聚合物1.0

删除嵌套元素的正确方法

createMigrationTable.html

<dom-module id="custom-create-migration-table">
<template>
    <style>
        paper-button {
            /**border: 1px solid #d81b60;*/
        }
        paper-material {
            width: 98%;
            margin: 5px auto;
        }
        br{
            clear:both;
        }
    </style>
        <paper-material elevation="2" id="page_2">
            createTable:
            <paper-button raised on-tap="addTable">
                + add new table
            </paper-button>
            <template is="dom-repeat" items="{{createTables}}">
                {{item.name}}
                <paper-input required label="Table Name" value="{{item.name}}"></paper-input>
                <template is="dom-repeat" items="{{item.columns}}" as="column">
                    <custom-column-view column="{{column}}"></custom-column-view>
                    <a on-tap="removeColumn">remove</a>
                    <br/>
                </template>
                <paper-button raised on-tap="addColumn">
                    Add Column
                </paper-button>

            </template>
        </paper-material>

</template>
</dom-module>

createMigrationTable.dart

@HtmlImport('createMigrationTable.html')
library dartabase.poly.createMigrationTable;

// Import the paper element from Polymer.
import 'package:polymer_elements/iron_pages.dart';
import 'package:polymer_elements/paper_material.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_input.dart';
//import "../poly/columnView.dart";
import "../poly/table.dart";

// Import the Polymer and Web Components scripts.
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';

@PolymerRegister('custom-create-migration-table')
class CreateMigrationTable extends PolymerElement {
    @property
    List<Table> createTables = new List();

    CreateMigrationTable.created() : super.created();

    @reflectable
    addTable(event, [_]) {
        Table table = new Table(name:"defaultName",columns: [{
            "name":"defaultName",
            "type":["BINT",
            "INT",
            "VARCHAR"
            ],
            "def":"",
            "nil":true
        }]);
        /*Map table = {
            "tableName":"defaultTableName",
            "columns":[{
                "name":"defaultName",
                "type":"defaultType",
                "default":"",
                "notNull":true
            }]
        };*/
        //createTables.add(table);
        add('createTables', table);
    }

    @reflectable
    transition(event, [_]) {
        IronPages ip = Polymer.dom(this.root).querySelector("iron-pages");
        ip.selectNext();
    }

    @reflectable
    void addColumn(event, [_]) {
        var model = new DomRepeatModel.fromEvent(event);
        model.add("item.columns", {
            "name":"defaultName",
            "type":"",
            "def":"",
            "nil":true
        });
    }

    @reflectable
    void removeColumn(event, [_]) {
        var model = new DomRepeatModel.fromEvent(event);
        model.removeItem("item", model.item);
    }
    void ready() {
        print("$runtimeType::ready()");
    }


}

tabel.dart

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

class Table extends JsProxy {
    @reflectable
    String name;
    @reflectable
    List columns;

    Table({this.name, this.columns});

}

删除元素的正确方法应该是什么。

首先我尝试从自定义列视图中调用remove。但是没有更新绑定然后我读到父元素应该控制添加和删除元素..所以我把它移到了上面一级。

我原以为我可以像在addColumn方法中那样做，但是在removeColumn中我只收到列视图项。

我也尝试使用index-as，但我不知道如何能够访问removeColumn函数中的索引i和j。

Answer 1

自定义等于实现可能会修复它（不确定）

class Table extends JsProxy {
    @reflectable
    final String name;
    @reflectable
    List columns;

    Table({this.name, this.columns});

    int get hasCode => name.hashCode;
    int operator ==(Object other) => other is Table && other.name == name;
}

如何使用聚合物＆gt; 1.0在dart中删除嵌套的dom rep元素

1 个答案: