Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

dart - Is it possible to create a Polymer element without Html?

My final objective is don't have to write HTML like this:

<div id='counter'>
     {{counter}}
  </div>

  <div>
     <button
        id="startButton"
        on-click="{{start}}">
        Start
     </button>
     <button
        id="stopButton"
        on-click="{{stop}}">
        Stop
     </button>
     <button
        id="resetButton"
        on-click="{{reset}}">
        Reset
     </button>
</div>

I would like to know if it is possible to create a Polymer-element without using HTML. For example I tried this:

@CustomTag('tute-stopwatch')
class TuteStopWatch extends PolymerElement {

ButtonElement startButton,
  stopButton,
  resetButton;

  @observable String counter = '00:00';

  TuteStopWatch.created() : super.created() {
    createShadowRoot()..children = [
      new DivElement()..text = '{{counter}}',

      new DivElement()..children = [
        startButton = new ButtonElement()..text = 'Start'
           ..onClick.listen(start),
        stopButton = new ButtonElement()..text = 'Stop'
           ..onClick.listen(stop),
        resetButton = new ButtonElement()..text = 'Reset'
           ..onClick.listen(reset)
      ]
    ];
  }
}

Previous code creates HTML and shadow root correctly, but it doesn't create the binding between the @observable counter and the text of the DivElement.

I know that this is caused because I am trying to create the shadow root after the element has been instantiated/created. So that I should create the template of the element in other place before the template has been bound with its observable.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can write a manual data binding like this:

   changes.listen((changes) {
     for (var change in changes) {
        if (change.name == #counter) {
           myDivElement.text = change.newValue;
        }
     }
   });

changes is a property of the Observable class, which PolymerElement mixes in. (This is difficult to see in the API reference, as it currently doesn't show a class' mixins or the mixed in properties and methods.)

Polymer seems to be mostly about enabling declarative html based bindings. It may be worth exploring using custom elements and shadow dom directly, as you're not really using polymer for anything in this example. To do this you need to change the class definition to:

   class TuteStopWatch extends HtmlElement with Observable {
     ...
   }

And register your element with document.register(). You also need to include the polymer.js polyfill for custom elements.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...