在动态添加dart聚合物元素时,如何在DOM上获取可观察变量_html-js-css

概述我正在尝试更改使用聚合物库的默认Web应用程序,以便创建聚合物元素并将其从DART代码添加到DOM,而不是包含在HTML中.我已成功将元素添加到DOM中,但我的可观察变量未在DOM上更新.事件正在被解雇,价值正在发生变化.我已经使用Observable.dirtyCheck()更新了DOM,但是,这显然很昂贵,所以我试图弄清楚如何在没有dirtyCheck()的情况下让聚合物更新dom. 所以,简我正在尝试更改使用聚合物库的默认Web应用程序,以便创建聚合物元素并将其从DART代码添加到DOM,而不是包含在HTML中.我已成功将元素添加到DOM中,但我的可观察变量未在DOM上更新.事件正在被解雇,价值正在发生变化.我已经使用Observable.dirtyCheck()更新了DOM,但是,这显然很昂贵,所以我试图弄清楚如何在没有dirtyCheck()的情况下让聚合物更新dom.

所以,简而言之,我如何摆脱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>

解决方法将dynamiccreate.dart文件更改为如下所示,计数器开始在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：将变量命名为newElement,而不是NewElement.固定在这里.

总结

以上是内存溢出为你收集整理的在动态添加dart聚合物元素时,如何在DOM上获取可观察变量全部内容，希望文章能够帮你解决在动态添加dart聚合物元素时,如何在DOM上获取可观察变量所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1108191.html

在动态添加dart聚合物元素时,如何在DOM上获取可观察变量

发表评论

评论列表（0条）