CODEWITHSUNDEEP
dartpolymerdart-polymer
Kevin Roj
Kevin Roj

Reputation: 21

Nesting in Dart PolymerElement in another PolymerElement

I'm trying to nesting in Dart PolymerElements in another PolymerElement like this.

@CustomTag('test-box')
class Box extends PolymerElement{
    @observable List<Child> childs = new List<Child>();

    Box.created() : super.created() { }
}

@CustomTag('test-child')
class Child extends PolymerElement{
    Child.created() : super.created() { }
}

and then in testbox.html

<link rel="import" href="testchild.html">
<polymer-element name="test-box">
  <template>
    <div>
      <ol name="child-list">
        <template repeat="{{child in childs}}">
          {{child}}
        </template>
      </ol>
    </div>
  </template>
  <script type="application/dart" src="testbox.dart"></script>
</polymer-element>

Is that possible with Dart/Polymer? All my tries are failed. I want to handle html nodes like classes.

Thanks in advance

Upvotes: 2

Views: 601

Answers (3)

Basic Coder
Basic Coder

Reputation: 11422

I had pretty much the same problem and solved it using some kind of proxy element. ProxyElement Dart code:

library ProxyElement;

import 'package:polymer/polymer.dart';

@CustomTag('proxy-element')
class ProxyElement extends PolymerElement {

  @published PolymerElement target;

  ProxyElement.created() : super.created();

  attached() {
    shadowRoot.querySelector('#proxy').append(target);
  }

}

And its HTML code:

<link rel="import" href="../packages/polymer/polymer.html">

<polymer-element name="proxy-element">
  <template>
    <style>
      :host {
        display: inline;
      }
    </style>

    <template if="{{target == null}}">
      No target element defined.
    </template>
    <template if="{{target != null}}"> 
      <div id="proxy"></div>      
    </template>
  </template>
  <script type="application/dart" src="proxy_element.dart"></script>
</polymer-element>

Usage:

...
<template repeat="{{child in children}}">
    <proxy-element target="{{child}}"></proxy-element>
</template>
...

Upvotes: 0

Vittorio Ballestra
Vittorio Ballestra

Reputation: 419

You can add the children nodes to the box, for example:

@CustomTag('test-box') 
class Box extends PolymerElement{
@observable List<Child> childs = new List<Child>();

    Box.created() : super.created() { 

    }

    void _addChildren(List<Child> children) {
        children.forEach((Child c) {
           this.children.add(c);
        }  
    }

    @override void attached() { super.attached(); _addChildren(childs); }
}

Then you can monitor changes on childs using observable API to reflect the changes on the array.

Beware that Child object should be created with new Element.tag("test-child").

But IMHO the best solution is the one offered by @Leksat using a more pure MVC approach.

Upvotes: 0

Leksat
Leksat

Reputation: 3111

You can use a model object to pass data to a child element via published property.

Check this example: https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/observable_objects_inside_list_changes

Upvotes: 1

Related Questions