个人中心
gpt4 book ai didi

dart - 以 JavaScript 运行时未附加嵌套的聚合物元素

转载 作者：行者123 更新时间：2023-12-03 02:41:26 24 4
gpt4 key购买 nike

我已经构建了一个使用嵌套 Polymer 元素的 Polymer.dart 应用程序。父元素接受一个属性并将其值作为属性传递给嵌套的子元素。当从 DartEditor 中“在 Dartium 中运行”时，这可以正常工作，但在应用程序“Pub Built”和“Run as JavaScript”后无法加载嵌套元素。在构建过程中没有错误消息，也没有任何其他类型的指针。我不知道如何调试它，而且它在 Dartium 中按预期运行而没有任何警告或错误的事实也无济于事。

以下是我的应用程序的简化版本的代码，它产生了同样的问题。 my_view是父元素，my_form是 my_view 时附加的嵌套元素已加载。

main.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>

    <link rel="import" href="my_view.html">

    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <h1>The view polymer element should appear below:</h1>
    <my-view viewAttribute="My_Value"></my-view>
  </body>
</html>

my_view.html 

<polymer-element name="my-view" attributes="viewAttribute">
  <link rel="import" href="my_form.html">

  <template>
    <div style="width: 100%;"><h1>The form should appear below:</h1></div>
    <div id="form_div" style="width: 100%;"></div>
  </template>
  <script type="application/dart" src="my_view.dart"></script>
</polymer-element>

my_view.dart 

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

@CustomTag('my-view')
class MyView extends PolymerElement {

  @published String viewAttribute;

  DivElement _formSlot;

  MyView.created() : super.created() {
    _formSlot = $['form_div'];
  }

  void viewAttributeChanged() {
    _formSlot..append(new Element.tag('form', 'my-form')..setAttribute("formAttribute", viewAttribute));
  }
}

my_form.html 

<polymer-element name="my-form" extends="form" attributes="formAttribute">
  <template>
    <div style="width: 100%;">Attribute value: {{formAttribute}}</div>
    <div style="width: 100%;">
      <label for="nameInput">name:</label>
      <input id="nameInput" type="text" value="{{nameValue}}" />
    </div>
    <div style="width: 100%;">
      <div id="button_div">
        <input type="submit" on-click="{{submitForm}}" value="send" />
      </div>
    </div>
  </template>
  <script type="application/dart" src="my_form.dart"></script>
</polymer-element>

my_form.dart 

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


@CustomTag('my-form')
class MyForm extends FormElement with Polymer, Observable {

  @published String formAttribute;

  @observable String nameValue;

  HttpRequest _request;

  MyForm.created() : super.created();

  void submitForm(Event e, var detail, Node target) {
    e.preventDefault();

    _request = new HttpRequest();

    _request.onReadyStateChange.listen(_onData);
    _request.open('POST', 'http://my.server.com/contact_form');
    _request.send(JSON.encode({'name': nameValue, 'attribute': formAttribute}));
  }

  _onData(_) {
    if (_request.readyState == HttpRequest.DONE) {
      switch (_request.status) {
        case 200:
          // Data was posted successfully
          break;

        case 0:
          // Post failed
          break;
      }
    }
  }
}

任何帮助，提示，良好的祝愿，祈祷将不胜感激!谢谢!

最佳答案

我想这是一个 dart2js 错误。
回答这个问题 Dynamically create polymer element我建立了一个例子。

此代码(如您在问题中所示)生成正确的标记，但表单元素无法正常工作。我没有进一步检查这种行为，因为我自己从不需要扩展 DOM 元素。

您也可以尝试不扩展 <FORM>元素但创建一个新的 Polymer 元素并嵌入 <FORM>元素。

关于dart - 以 JavaScript 运行时未附加嵌套的聚合物元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20921078/

24 4 0
文章推荐： android - 如何从 Android 服务调用 Dart 代码？
文章推荐： java - 搜索 Firestore 查询不在 RecycleView 中显示数据
文章推荐： java - AIDL 是如何工作的？
文章推荐： attributes - 在 AngularDart 中包含 mustache 指令时，NgAttr 值最初为空
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com