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 ”创建了另外两个类。因此，我可以访问我的可观察变量。但为此，我还需要将它们声明为静态，并在我的子类中将 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();
  }
}

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

1 个答案: