Вложенный полимерный элемент не прикреплен при запуске от имени JavaScript

Я создал приложение Polymer.dart, в котором используются вложенные элементы Polymer. Родительский элемент принимает атрибут и передает его значение вложенному дочернему элементу в качестве атрибута. Это отлично работает, когда «Запустить в Dartium» из DartEditor, но вложенный элемент не загружается после того, как приложение «Построено в пабе» и «Запускается как 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;
      }
    }
  }
}

Будем очень признательны за любую помощь, подсказки, пожелания, молитвы! Спасибо!


dart dart-polymer
person Branka    schedule 04.01.2014    source источник
comment
Вероятно, та же причина? stackoverflow.com/questions/20914791/   -  person MarioP    schedule 04.01.2014
comment
МариоП, спасибо за ссылку. Поля атрибутов уже аннотированы @published, так что это может быть не та же проблема, но я рассмотрю ее подробнее.   -  person Branka    schedule 04.01.2014
comment
если подумать - запуск с Dart2js не работал у меня, когда я делал только export "packages:polymer/init.dart" в html-файле, потому что dart2js никогда не вызывался и файл JS не создавался. Для меня это никогда не было проблемой, потому что у меня все равно есть другая инициализация, но ваш случай отличается. не могли бы вы попробовать сделать очень простой основной файл дротика, который просто вызывает initPolymer() из полимера. dart и вместо этого включает его в основной файл HTML?   -  person MarioP    schedule 04.01.2014
comment
Форма отображается без проблем в режиме JS, когда элемент формы размещается непосредственно внутри html-файла хоста без вложенности как <form is="my-form" formAttribute="My_Value"></form>. Эта проблема как-то связана либо с передачей атрибута вложенному дочернему полимерному элементу, либо со способом динамического прикрепления формы.   -  person Branka    schedule 05.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, это ошибка dart2js. Для ответа на этот вопрос Динамическое создание полимерного элемента я создал пример.

Этот код (как вы показали в своем вопросе) генерирует правильную разметку, но элемент формы не работает должным образом. Я не стал исследовать это поведение дальше, потому что мне самому никогда не приходилось расширять элемент DOM.

Вы также можете попробовать не расширять элемент <FORM>, а создать новый элемент Polymer и просто встроить элемент <FORM>.

person Günter Zöchbauer    schedule 05.01.2014
comment
Проблема заключается в вызове setAttribute(). При удалении вызова проблема не возникает. Я предполагаю, что это связано с ошибкой в ​​dart2js, из-за которой он не может обработать вызов setAttribute(). - person Branka; 06.01.2014