MY-element.html

Question

我有一个聚合物元素，其模型可能是两个类之一（技术上是一个共同超类的两个子类之一）。我根据模型的两个类中的哪一个来寻找我的元素模板略有不同。像这样：

<polymer-element name="my-element">
<template>
    {{model.runtimeType}} <!-- sanity check -->
    {{model.commonProperty}}
    <template if="{{model is Foo}}">
      {{model.fooSpecificProperty}}
    </template>
    <template if="{{model is Bar}}">
      {{model.barSpecificProperty}}
    </template>
</template>
<script type="application/dart" src="my-element.dart"></script>
</polymer-element>

我发现的是两个if模板都在显示，好像model is Foo和model is Bar都返回true。对于每种类型的模型，我都会看到{{model.runtimeType}}正在打印Foo和Bar。

我也尝试将if条件更改为其他内容，例如{{model.runtimeType.toString() == 'Foo'}}，但我似乎找不到合适的条件来正确整理我的模型类型。

在Dart Polymer元素中，根据对象的类型检测和过滤的正确方法是什么？

编辑：还注意到{{model is Foo}}和{{model is! Foo}}似乎在Polymer中使用时返回true作为条件，但在.dart文件中按预期工作。

Answer 1

此处不使用toString()非常重要，因为在使用dart2js缩小时它不起作用。与其他建议类似，这里有两个想法，即使混淆/缩小也应该有效。

<polymer-element name="x-tag">
<template>
    <!-- idea #1 -->
    <template if="{{model.runtimeType == fooType}}"> ...

    <!-- idea #2 -->
    <template if="{{isFoo}}"> ...

和

@CustomTag(x-tag)
class XTag extends PolymerElement {
  // idea #1
  Type get fooType => Foo;

  // idea #2
  @observable bool isFoo;
  @ObserveProperty('model')
  updateIsFoo() { isFoo = model is Foo; }

}

Answer 2

问题是，Foo / Bar（Type类型在聚合物表达式中无法识别/可用，因此is或is!无效。< / p>

model.runtimeType.toString() == 'Bar'

应该工作。我会调查。

我的工作是：

on my-element

String asString(value) {
  return value.runtimeType.toString();
}

  <template if="{{asString(model) == 'Foo')}}">
    {{model.fooSpecificProperty}}
  </template>
  <template if="{{asString(model) == 'Bar'}}">
    {{model.barSpecificProperty}}
  </template>

也在工作

class Base {
  String commonProperty = 'common';

  @override
  String toString() => runtimeType.toString();
}

  <template if="{{model.toString() == 'Foo')}}">
    <div style="border: solid 1px red;">{{model.fooSpecificProperty}}</div>
  </template>
  <template if="{{model.toString() == 'Bar'}}">
    <div style="border: solid 1px green;">{{model.barSpecificProperty}}</div>
  </template>

Answer 3

鉴于Polymer bug https://code.google.com/p/dart/issues/detail?id=20980，现在似乎最好的方法是解决方法。我能找到的最干净的解决方法是

MY-element.html

<polymer-element name="my-element">
<template>
    {{model.runtimeType}} <!-- sanity check -->
    {{model.commonProperty}}
    <template if="{{model.type == 'Foo'}}">
      {{model.fooSpecificProperty}}
    </template>
    <template if="{{model.type == 'Bar'}}">
      {{model.barSpecificProperty}}
    </template>
</template>
<script type="application/dart" src="my-element.dart"></script>
</polymer-element>

model_superclass.dart

abstract class ModelSuperclass {
  var commonProperty;
  String get type => this.runtimeType.toString();
}

将来，一旦错误得到解决，完成此任务的最佳方法是使用

<template if="{{model.runtimeType.toString() == 'Foo'}}">

检查Polymer Element中的对象类型

3 个答案:

MY-element.html

model_superclass.dart