Trouble when trying to access instances of webcomponents in the dom in Dart?

StackOverflow https://stackoverflow.com/questions/17302714

  •  01-06-2022
  •  | 
  •  

Pregunta

I have created a webcomponent called "color-item" and instantiated it throug adding its custom element tag in the html. I'we also given the elements id's like this:

<color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></color-item>
<color-item id="colorItem2" color_text="green" bg_color="YellowGreen" ></color-item>

The compoenents show up just fine and behave as expected. However, when I try to access those elements (in the main loop) to do some fun things on them with Dart-code I just end up with errors. Here is how I have tried to access them:

    ColorItem color_Item1 = query("#colorItem1").xtag;
    ColorItem color_Item2 = query("#colorItem2").xtag;

That produces the following error:

    Breaking on exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.

I'we also tried casting like this:

    ColorItem color_Item1 = query("#colorItem1").xtag(ColorItem);
    ColorItem color_Item2 = query("#colorItem2").xtag(ColorItem);

That produces a similar error:

    Exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.
    Breaking on exception: Class 'DivElement' has no instance method 'call'.

The component itself is defined like this:

   <!DOCTYPE html>
   <html>
   <body>
   <element name="color-item" constructor="ColorItem" extends="div">
   <template>

   <style scoped>

      .color-box{
          cursor:pointer;
          padding:20px;            
          margin:10px;
          margin-left:0px;
          display:inline-block;

          width:auto;
          height:auto;
          position: relative;
          font-size: 24px;
          color:white;
          background-color:orange;
          border-radius:24px;
          box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
          user-select: none;
         }

    </style>

    <div class="color-box" style="background-color:{{bg_color}}; color:{{text_color}}" on-click="swapColor()"> Color: <b>{{color_text}}</b> </div>
  </template>
  <script type="application/dart" src="ColorItem.dart"></script>
  </element>
  </body>
  </html>

and the script for the component looks like this:

    import 'package:web_ui/web_ui.dart';

    class ColorItem extends WebComponent {
      @observable
      String color_text ="orange";

      @observable
      String bg_color ="orange";

      @observable
      String text_color ="white";

      @observable
      ColorItem next_color_item =null;




      List<String> colors = new List<String>()
       ..add("LimeGreen")
       ..add("green")
       ..add("yellow")
       ..add("OrangeRed")
       ..add("red")
       ..add("purple")
       ..add("blue");


     int i = 0;


     String getNextColor(){
       i++;
       i%=colors.length;
       return colors[i];
     }

    void swapColor(){
      String oldColor = bg_color;
      String nextColor = getNextColor();
      bg_color = nextColor;
      color_text = nextColor;
      if(next_color_item!=null){
        next_color_item.bg_color = oldColor;
      next_color_item.color_text = oldColor;
    }

    }
    }

Any suggestions?

¿Fue útil?

Solución

The problem is that the custom elements haven't been "ugraded" yet, so the xtag isn't set properly. The specific error you're seeing is odd though, because I would expect xtag to be null, not a DivElement.

Try this and see if it works:

Timer.run(() {
  ColorItem color_Item1 = query("#colorItem1").xtag;
  ColorItem color_Item2 = query("#colorItem2").xtag;
});

Otros consejos

Try replacing;

<color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></color-item>
<color-item id="colorItem2" color_text="green" bg_color="YellowGreen" ></color-item>

with

<div is="x-color-item" id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></div>
<div is"x-color-item" id="colorItem2" color_text="green" bg_color="YellowGreen" ></div>

and replace

<element name="color-item" constructor="ColorItem" extends="div">

with

<element name="x-color-item" constructor="ColorItem" extends="div">

and try to use code like the following in main;

var color_Item1 = query("#colorItem1").xtag;
  print(color_Item1.attributes);
  color_Item1.attributes.forEach((k,v){
    print('$k :: $v');
  });
var color_Item2 = query("#colorItem2").xtag;

Not tested, but could you try this?

<color-item 
  on-load='onLoadHandler($event)'
/>

Then in the main, foresee the handler :

void onLoadHandler(Event event) {
    DivElement theDiv = event.currentTarget as DivElement;
    // then the xtag
    theDiv.xtag.doSomethingVeryFunky();
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top