使用一个 Dart 脚本构建具有多个元素的 Polymer 应用程序

Question

你知道如何在一个 Dart 脚本中使用多个“聚合物元素”吗？

我成功了，但我不确定这是最好的解决方案。

我的示例是使用 Dart/WebUI 实现以下示例的 Dart/Polymer： 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”创建了另外两个类。因此我可以访问我的可观察变量。但为此，我还需要将它们声明为 static，并在我的子类中将 setters 设为 getters，否则我的聚合物元素不能共享可观察变量。

这个方法行得通，但你认为有更好的方法吗？

Answer 1

您如何将这些元素添加到您的页面中？ 据我了解您想要什么，继承（扩展）不是合适的解决方案。 我没有尝试运行此代码，只是在文本字段中编辑了您的代码。 如果这是您想要做的，但有些东西不起作用，请发表评论。 只要不清楚您到底想要实现什么，我就不想花太多时间。

在您的网页中，您可以像这样布置您的元素：

<example-template1></example-template1>
<example-template2></example-template2>
<example-script></example-script>

你的元素

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

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

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

你的 Dart 脚本如下：

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

class Model extends Object with Observable {
  @observable List<String> fruits = toObservable(new List<String>());
  @observable String research = '';
}

@CustomTag('example-script')
class FruitsScript extends PolymerElement {
  @published Model model = new Model();

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

  void attached() {
    super.attached();
    (document.querySelector('example-template1') as FruitsResearch).model = model;
    (document.querySelector('example-template2') as FruitsDisplay).model = model;
  }
}

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

  @published Model model;

  void get_results(Event e, var detail, Node target) {
    if (this.research.length > 0) {
      var lResearch = this.model.research.toLowerCase();
      var results = this.model.fruits.where((v) => v.toLowerCase().contains(lResearch));
      this.model.fruits = toObservable(results);
    }
  }
}

@CustomTag('example-template2')
class FruitsDisplay extends PolymerElement {
  @published Model model = new Model();

  FruitsDisplay.created() : super.created() {
    this.model.fruits = toObservable([ 'Apple', 'Apricot', 'Avocado']);
    this.model.fruits.sort();
  }
}