How to remove a nested dom rep element in dart using polymer >1.0

Question

Hello I cant seem to find the correct way to remove a nested element using polymer 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});

}

what should be the correct way to remove the element.

first I tried to call remove from inside the custom-column-view. but that did not update the bindings then I read that the parent elements should have the control over adding and removing elements.. so I moved it one level above.

I would have thought that I can do it like in the addColumn method but but inside removeColumn I only receive the column view item.

I also tried to use index-as but I dont know how to be able to access both indexes i and j inside the removeColumn functions.

Answer 1

A custom equals implementation might fix it (not sure)

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;
}