1

我创建了一个名为“color-item”的 web 组件，并通过在 html 中添加其自定义元素标记来实例化它。我还给了元素 ID，如下所示：

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

组件显示得很好并且表现如预期。但是，当我尝试访问这些元素（在主循环中）以使用 Dart 代码对它们做一些有趣的事情时，我最终会遇到错误。以下是我尝试访问它们的方式：

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

这会产生以下错误：

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

我也尝试过这样的投射：

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

这会产生类似的错误：

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

组件本身定义如下：

   <!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>

该组件的脚本如下所示：

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

    }
    }

有什么建议么？

4

3 回答 3

1

问题是自定义元素还没有被“升级”，所以xtag没有正确设置。不过，您看到的具体错误很奇怪，因为我希望xtag为 null，而不是DivElement.

试试这个，看看它是否有效：

Timer.run(() {
  ColorItem color_Item1 = query("#colorItem1").xtag;
  ColorItem color_Item2 = query("#colorItem2").xtag;
});
于 2013-06-26T17:06:55.120 回答
1

尝试更换；

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

和

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

并更换

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

和

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

并尝试在 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;
于 2013-06-25T17:25:54.417 回答
1

没有测试，但你能试试这个吗？

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

然后主要是预见处理程序：

void onLoadHandler(Event event) {
    DivElement theDiv = event.currentTarget as DivElement;
    // then the xtag
    theDiv.xtag.doSomethingVeryFunky();
}
于 2013-06-26T17:13:55.393 回答