如何在纸质版本0.6.0 + 4中对纸张输入装饰器进行数据绑定

时间:2014-12-18 13:23:45

标签: dart dart-polymer material-design paper-elements core-elements

我有以下代码

html的

    <!DOCTYPE html>

    <link rel='import' href='../../../packages/polymer/polymer.html' >

    <link rel='import' href='../../../packages/paper_elements/paper_input.html' >
    <link rel='import' href='../../../packages/paper_elements/paper_button.html' >
    <link rel='import' href='../../../packages/core_elements/core_collapse.html' >

    <link rel="import" href="../../../packages/paper_elements/roboto.html">

    <polymer-element name='language-form'>

      <template>
        <div
          class='parent-container'
          on-mouseout='{{publishInstance}}'>
          <paper-button
            id='add-btn'
            class='margin-l-t-r-2'
            on-click='{{toggle}}'>
            <core-icon icon='refresh'></core-icon>
            LANGUAGE
          </paper-button>

          <core-collapse 
            id='core-collapse'>
            <div layout vertical
              class='sibling-container'>

                        <paper-input-decorator floatinglabel required
                        label="First">
                        <input 
                          id='first'
                          is="core-input"
                          on-input='{{onInputHandler}}'
                          inputValue='{{language.first}}'>
                        </paper-input-decorator>          


              <paper-input floatinglabel
                id='second'
                label='Second'
                inputValue='{{language.second}}'
                on-input='{{onInputHandler}}'>
              </paper-input>
          </div>
          </core-collapse>
        </div>
      </template>

      <script type='application/dart' src='language_form.dart'></script>
    </polymer-element>

.dart

class Language extends Observable {
  @observable
  String first = '';

  @observable
  String second =  '';
}

import 'package:polymer/polymer.dart';
import 'dart:html' as dom;
import 'package:paper_elements/paper_button.dart';
import 'package:epimss_reg/epimss_reg.dart' show Language;
import 'package:epimss_shared/epimss_shared.dart';
import 'package:core_elements/core_collapse.dart';

@CustomTag('language-form')
class LanguageForm extends PolymerElement {
  @observable Language language = new Language();

  String topic = '';
  PaperButton addBtn;

  LanguageForm.created() : super.created();

  void toggle() {
    toggleCoreCollapse($['core-collapse']);
  }

  void onInputHandler(dom.Event e) {
    var element = e.target;
    var property = element.id;

    switch(property) {
      case 'first':
       //validateProperty(language, property, element, addBtn);
        print((element as dom.InputElement).text);
       print( 'First is ${language.first}');
       break;

      case 'second':
       //validateProperty(language, property, element, addBtn);
        print( 'Second is ${language.second}');
       break;
    }
  }

  void publishInstance() {/*
    if (language.isValid) { eventBus.signal(
          new DynamicEvent(language)
            ..topic = this.dataset['topic']);
    } */
  }

  @override
  void attached() {
     super.attached();
     addBtn = $['add-btn'];
  }

  void toggleCoreCollapse(dom.Element coreCollapse) {
    (coreCollapse as CoreCollapse).toggle();
  }
}

运行程序始终打印

Failed to load resource: the server responded with a status of 404 (Not Found)
  http://localhost:8081/packages/web_components/webcomponents.js
 First is  (:1)

我做错了什么?

由于

0 个答案:

没有答案