尝试在 Dart 中访问 dom 中的 web 组件实例时遇到问题？答案

【问题标题】：Trouble when trying to access instances of webcomponents in the dom in Dart?尝试在 Dart 中访问 dom 中的 web 组件实例时遇到问题？
【发布时间】：2013-06-22 13:37:29
【问题描述】：

我创建了一个名为“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;
    }

    }
    }

有什么建议吗？

【问题讨论】：

标签： dom dart dart-webui

【解决方案1】：

问题在于自定义元素尚未“升级”，因此xtag 设置不正确。不过，您看到的具体错误很奇怪，因为我希望 xtag 为空，而不是 DivElement。

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

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

【讨论】：

这对贾斯汀有效！ :) 但不知何故，它似乎很神奇......我不明白计时器如何知道回调代码何时可运行然后运行它。它只是一遍又一遍地尝试吗？或者它可以订阅元素何时“升级”的通知？我很想了解背后的魔力。
我的代码中也试过这个，对象有区别。它是一个没有 Timer 的 div，但它是一个带有 Timer 的 ColorItem。 @Justin，这是因为代码被放置在异步队列中并为主进程提供了完全初始化的机会吗？
@MrMambo007 艾伦的理论是正确的，没有魔法！在 main() 中使用 Timer.run 会延迟运行代码（在匿名函数中），直到 main() 循环完成。目前 web_ui 在 main() 循环完成之前无法初始化元素的 xtag。尝试绑定到我的 Web 组件上的自定义事件处理程序时，我遇到了类似的问题。 stackoverflow.com/questions/16362148/….
@ianmjones 是正确的。我认为这是 Web UI 的一个相当大的可用性问题，我希望我们能解决它。过去，.xtag 在元素升级之前返回 null 的情况是，我认为有些东西没有被初始化更明显。随着时间的推移让 .xtag 更改类非常令人困惑。

【解决方案2】：

尝试替换；

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

【讨论】：

感谢艾伦的建议，但没有任何改变。相同的错误信息。应用程序在运行“ColorItem color_Item1 = query("#colorItem1").xtag(ColorItem);”时崩溃行
我已通过更新编辑了我的帖子。我认为该变量是一个 DivElement，但 var 会使其工作。试试我在最新更新中使用的 sn-p。

【解决方案3】：

未测试，但你能试试这个吗？

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

然后在主体中，预见处理程序：

void onLoadHandler(Event event) {
    DivElement theDiv = event.currentTarget as DivElement;
    // then the xtag
    theDiv.xtag.doSomethingVeryFunky();
}

【讨论】：