Создайте приложение Polymer с несколькими элементами, используя один сценарий Dart.

Знаете ли вы, как использовать несколько «полимерных элементов» только с одним скриптом Dart?

Мне это удалось, но я не уверен, что это лучшее решение.

Мой пример представляет собой Dart/Polymer реализацию следующего примера с Dart/WebUI: https://www.dartlang.org/articles/web-ui/#loops

Он отображает список фруктов в полимерном элементе ("example-template1") и где мы можем исследовать конкретный фрукт в другом полимерном элементе ("example-template2). >»). Второй полимер-элемент должен обновить первый с привязкой данных.

Для этого я объявил как следующие мои полимерные элементы. Один родительский элемент-полимер с именем "example-script" (поскольку мы можем использовать только одно объявление сценария в файле шаблонов полимера) и дочерние элементы, которые наследуются от этого родителя:

<polymer-element name="example-script">
  <script type="application/dart" src="tute.dart"></script>
</polymer-element>

<polymer-element name="example-template1" extends="example-script">
  <template>
    <div>
      <p>Search fruit</p>
      <input type="text" class="form-control" value="{{ research }}" on-input="{{ get_results }}">
    </div>
  </template>
</polymer-element>

<polymer-element name="example-template2" extends="example-script">
  <template>
    <div><ul>
      <template repeat="{{ fruit in fruits }}">
        <li>{{ fruit }}</li>
      </template>
    </ul></div>
  </template>
</polymer-element>

Мой сценарий Dart выглядит следующим образом:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('example-script')
class FruitsScript extends PolymerElement {
  static List<String> fruitsList = new List();

  @observable static List<String> fruits = toObservable(fruitsList);
  @observable static String research = '';

  FruitsScript.created() : super.created();
}

@CustomTag('example-template1')
class FruitsResearch extends FruitsScript {
  FruitsResearch.created() : super.created();

  String get research {
    return FruitsScript.research;
  }

  String set research(String search) {
    FruitsScript.research = search;
  }

  void get_results(Event e, var detail, Node target) {
    FruitsScript.fruits.clear();

    if (FruitsScript.research.length > 0) {
      var lResearch = FruitsScript.research.toLowerCase();
      var results = FruitsScript.fruitsList.where((v) => v.toLowerCase().contains(lResearch));
      FruitsScript.fruits.addAll(results);
    }
    else {
      FruitsScript.fruits.addAll(FruitsScript.fruitsList);
    }
  }
}

@CustomTag('example-template2')
class FruitsDisplay extends FruitsScript {
  FruitsDisplay.created() : super.created() {
    List<String> fruits = [ 'Apple', 'Apricot', 'Avocado'];

    FruitsScript.fruitsList.clear();
    FruitsScript.fruitsList.addAll(fruits);
    FruitsScript.fruitsList.sort();
    FruitsScript.fruits.clear();
    FruitsScript.fruits.addAll(FruitsScript.fruitsList);
  }

  List<String> get fruits {
    return FruitsScript.fruits;
  }
}

Я объявляю один родительский класс "FruitsScript" для инициализации наблюдаемых переменных. Затем я создаю два других класса для моих двух полимерных элементов "example-template1/2". Следовательно, я могу получить доступ к своим наблюдаемым переменным. Но для этого мне также нужно объявить их как статические и сделать сеттеры геттерами в моих подклассах, иначе мои полимерные элементы не смогут разделить наблюдаемые переменные.

Этот метод работает, но как вы думаете, есть ли лучший способ сделать это?