Al agregar dinámicamente elementos de polímero de DART, ¿cómo obtengo variables observables en DOM

StackOverflow https://stackoverflow.com//questions/20026721

  •  21-12-2019
  •  | 
  •  

Pregunta

Estoy tratando de cambiar la aplicación web predeterminada que usa la biblioteca de polímeros de modo que el elemento de polímero se crea y agregue al DOM del código DART en lugar de incluirlo en el HTML.He logrado agregar el elemento a la DOM, pero mi variable observable no se está actualizando en el DOM.Los eventos se están disparando, y los valores están cambiando.Tengo la DOM para actualizar usando observable.dirtycheck (), sin embargo, esto es aparentemente caro, por lo que estoy tratando de averiguar cómo obtener polímero para actualizar DOM sin DirtyCheck ().

Entonces, en resumen, ¿cómo me deshago de observable.dirtycheck () ???

dynamiccreate.dart 

library dynamiccreate;

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



main() {
  initPolymer();

  //create click-counter element at runtime from DART, not HTML
  var NewElement = new Element.tag('click-counter');
  NewElement.setAttribute("count", "5");
  //Add to DOM
  querySelector('#sample_container_id').children.add(NewElement);
}

dynamiccreate.html 

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="dynamiccreate.css">

    <!-- import the click-counter -->
    <link rel="import" href="clickcounter.html">
    <!-- <script type="application/dart">export 'package:polymer/init.dart';</script> -->
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <h1>DynamicCreate</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
     <!--  <click-counter count="5"></click-counter> -->
    </div>
    <script src="dynamiccreate.dart" type="application/dart"></script>
  </body>
</html>

Clickcounter.Dart 

import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
  }

  //increment gets called when dynamically adding object at runtime
  //But does not update count on DOM
  void increment() {
    count++;
    //Have to add this to update count in DOM
    Observable.dirtyCheck(); //<<<---How do I get rid of this???
  }
}

Clickcounter.html 

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

¿Fue útil?

Solución

Cambie su archivo dynamiccreate.Dart para que se vea así, y el contador comienza a incrementar en la UI: 

library dynamiccreate;

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

main() {
  initPolymer().run(() {
    var newElement = new Element.tag('click-counter');
    newElement.setAttribute("count", "15");
    querySelector('#sample_container_id').children.add(newElement);
  });
}

nit: nombre de su variable newElement, no NewElement.Arreglado aquí.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top