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です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">

メインで次のようなコードを使用してみてください。

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 に答える