使用Dart Polymer进行元素重用

Question

Proposition: 主张：

G'day, I have a question for the collective 今天，我要向集体提出问题 dart wisdom-trust. 飞镖智慧信任。 I made an observation while trying to resolve a mysterious error with Dart and Dart-Polymer (see: related ). 在尝试解决Dart和Dart-Polymer的一个神秘错误时，我进行了观察（请参阅： related ）。

The thing I came across relates to dart-polymer (and dart-polymer ) Element code-reuse ; 我遇到的事情与dart-polymer （和dart-polymer ）元素代码重用有关； during my investigation of the aforementioned bug, I created two cloned dart-polymer elements: 在调查上述错误的过程中，我创建了两个克隆的dart-polymer元素：

<x-fred> and <x-fred>和
<z-fred>

Both are clones of the Stopwatch element in the dart-polymer example. 两者都是飞镖聚合物示例中秒表元素的克隆。

Define a Custom Element tutorial. 定义一个自定义元素教程。

The only change from the original is element name(s). 与原始文件相比，唯一的变化是元素名称。

What occurs to me, is that to be able to code-reuse a nice ' stock element ' such as a stopwatch I minimally need a distinct fred .html for each Element I code-reuse . 我想到的是，要能够代码重用很好的“ stock element ”（例如秒表），我最少需要为每个我代码重用的元素使用一个独特的fred .html。

That presupposes that I can organise my project such that this is convenient and simple to maintain. 前提是我可以组织我的项目，以使其方便且易于维护。

Question(s): 问题（S）：

The real question is about how-can a developer do the following things ... ? 真正的问题是关于开发人员如何做以下事情……？

code-reuse an Element layout definition without needing to make a clone (or copy ). 代码重用元素布局定义，而无需进行克隆（或复制）。
Is there a dart-polymer pattern to ( at least ) allow a project to code-reuse the base 是否有飞镖聚合物图案（至少）允许项目对基础代码进行重用 dart code for cloned dart-polymer elements? 镖用于克隆的代码镖聚合物元件？
Is there a way to code-reuse an Element definition, using a declarative or " what-not-how " pattern so that I can say: 有没有一种方法可以使用声明性或“ 不怎么做 ”模式对元素定义进行代码重用，这样我可以说：
- <z-fred> is-a stopwatch-element (for example). <z-fred> 是 秒表元素 （例如）。
Are there patterns or recipes to let you be-a stopwatch-element and configure and/or customise an instance to certain styling, parameters, or behaviours. 是否存在让您成为 秒表元素并根据特定样式，参数或行为配置和/或自定义实例的模式或配方。

If not, then these things need to be set-down for discussion. 如果没有，那么这些事情需要进行讨论。 Where does that happen for 那在哪里发生 dart and [dart:polymer]? 飞镖和[飞镖：聚合物]？ Is there an comp.lang.dart? 有comp.lang.dart吗？ :-) :-)

Example: 例：

Assume I have a Polymer element called <z-fred> . 假设我有一个名为<z-fred>的Polymer元素。 And I want to subclass the z-fred element to produce a new ( daughter ) element definition: <x-fred> 我想将z-fred元素子类化以生成新的（子元素）元素定义： <x-fred>

How can I do this? 我怎样才能做到这一点？

I'd expect to be able to do something like ... 我希望能够做类似...

  <!DOCTYPE html>
  <polymer-element name="x-fred">

    <link rel="import"     href="elements/zfred/fred.html">

    <template>
      <style>
        :host {  /* override zfred defiitions */
            background-color: blue;
            text-align: center;
            display: inline-block;
            border: solid 1px;
            padding: 10px 10px 10px 10px;
        }
      </style>
      <div>
        <x-fred> 
          <h1>X-Fred: {{counter}} </h1>
          <p>Fred X is a count-down timer.  Fred Z is a normal stopwatch (count-up).</p>
          <override>
            <button on-click="{{stop}}"  id="stopXFredButton">Stop</button>
          </override>
        </x-fred>
        <div>
           <p>this is a count-down timer.  Remaining time at end: {{ counter }} </p>
        </div>
      </div>
    </template>

    <script type="application/dart" src="xfred.dart">  </script>

  </polymer-element>

See? 看到？ My example won't work because what's required here is that XFred.polymer inherits from ZFred.polymer. 我的示例不起作用，因为这里需要的是XFred.polymer继承自ZFred.polymer。

That said, there is nothing I've seen to bind .html plus .dart into a 'element module ' of some ilk. 也就是说，我没有看到将.html和.dart绑定到一些类似的“元素模块 ”中的任何内容。 In my small way I wanted to do that by putting each widget in its own folder. 我希望通过将每个小部件放在其自己的文件夹中的方式来实现。 For this to work (and there will be better mechanics), the daughter needs to be able to override parent Public and Protected attributes (not private). 为了使它起作用（并且会有更好的机制），子级需要能够覆盖父级的“公共”和“受保护”属性（非私有）。

I was thinking that xfred.dart would implicitly inherit zfred.dart (since lexically) both Dart files are unrelated to the Polymer element. 我以为xfred.dart会隐式继承zfred.dart（从词法上来说），两个Dart文件都与Polymer元素无关。 At this juncture there are product design questions to be explored. 在这个关头，有一些产品设计问题需要探讨。 Options like: 选项如下：

HTML files have independent inheritance tree to the .Dart files. HTML文件对.Dart文件具有独立的继承树。
- That means that zfred and xfred might use (share) the same underlying implementation, per various examples. 这意味着，按照各种示例，zfred和xfred可能使用（共享）相同的基础实现。
- Alternately, one could ' invoke ' a suitable .Dart implementation of a defined interface. 或者，可以“ 调用 ”已定义接口的适当.Dart实现。
A blended ' widget ' element made up of .html and .dart code specifications. 由.html和.dart代码规范组成的混合“ 小部件 ”元素。

In a real user interface, I may want to combine a variety of base UI elements into different kinds of sub-elements to make-up a page, form or layout. 在真实的用户界面中，我可能希望将各种基本的UI元素组合到不同种类的子元素中，以构成页面，表单或布局。 I think life remains less messy following concept #1. 我认为，遵循＃1 概念后，生活仍然不会那么混乱。 That satisfies another requirement for me, to do with being able to manage alternate code-behind behaviour for the same element. 这满足了我的另一个要求，即能够管理同一元素的备用代码隐藏行为。

At the end of the day. 在一天结束时。 The main question I'm asking is how much is part of the framework and how much is manual hack work to ensure things stay happy? 我要问的主要问题是，框架的一部分是多少，手动黑客工作有多少，以确保一切正常？ :-) :-)

Answer 1

You can inherit from existing polymer elements. 您可以继承现有的聚合物元素。

For discussions the best place are the Dart Google groups 进行讨论的最佳地点是Dart Google小组

使用Dart Polymer进行元素重用

问题描述

Proposition: 主张：

Question(s): 问题（S）：

Example: 例：

1 个解决方案

解决方案1
1 2014-03-20 07:27:18

使用Dart Polymer进行元素重用

问题描述

Proposition: 主张：

Question(s): 问题（S）：

Example: 例：

1 个解决方案

解决方案1 1 2014-03-20 07:27:18

解决方案1
1 2014-03-20 07:27:18