聚合物paper_input的数据绑定不起作用

时间:2014-07-07 01:20:05

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

我有以下代码,其中first_name和属性val之间需要双向绑定。

  <!DOCTYPE html>

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

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

  <polymer-element name='paper-input-snippet'>
    <template>

    <div on-mouseout="{{zoom}}">
      <paper-input
        label="First" floatinglabel
        error="Invalid input"

        id="first_name"
        value='{{val}}'>
      </paper-input>

      <paper-input
        label="Middle" floatinglabel
        error="Invalid input"

        id="middle_name">
      </paper-input>

      <paper-input
        label="Last" floatinglabel
        error="Invalid input"

        id="last_name">
      </paper-input>

    </div>

    </template>

    <script type="application/dart">

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

    import 'package:paper_elements/paper_input.dart';

    @CustomTag( 'paper-input-snippet' )
    class PaperInputSnippet extends PolymerElement
    {
      @observable String val = 'Tommy';
      String receiver = '';

      PaperInputSnippet.created() : super.created();

      void zoom( Event e, var detail )
      {
        print ( e.target );
        print ( val);
      }

      @override
      void attached()
      {
         super.attached();
         receiver = this.dataset['receiver'];
      }
    }

    </script>
  </polymer-element>

但是,更改纸质元素的值不会打印新值,只会打印初始值。

这是一个错误还是我做错了&gt;

1 个答案:

答案 0 :(得分:1)

修改

刚刚发布了更新的Polymer软件包,可以解决此问题 见https://groups.google.com/a/dartlang.org/forum/#!topic/bugs/-2f-TeaOoac 了解更多详情。

您需要调整依赖关系约束才能获得此更新,因为它是一个开发版本

polymer: ">= 0.11.1-dev < 0.12.0" 

编辑结束

此代码有一个未解决的问题.google.com/p/dart/issues/detail?id=19794

在修复之前,您可以通过添加on-change事件处理程序来解决此问题:

<paper-input
    label="First" floatinglabel
    error="Invalid input"

    id="first_name"
    value='{{val}}'
    on-change='{{firstNameChangeHandler}}'
    >
  </paper-input>
  void firstNameChangeHandler() {
    val = ($['first_name'] as PaperInput).value;
  }