Polymer 1.0 如何在按下按钮后在 vaadin 网格中显示纸张输入的值？

Question

我正在尝试在 Polymer 中创建一些纸张输入。当我点击项目旁边的 "calculate" 图标时，它不显示值或纸张输入的结果。看起来调用值时出错（？），我不确定如何修复它？谢谢！

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;

      }
      .form paper-icon-button{
        left: 45%;
        height: 120px;
        width: 120px;
      }
      .form paper-input{
        margin-left: 150px;
        margin-right: 150px;
      }

    </style>

    <div class="card">
      <div class="form">
      <paper-input type="number" name="satu" label="BLABLABLA1" value="{{todo.satu}}"></paper-input>
      <paper-input type="number" name="dua"label="BLABLABLA2" value="{{todo.dua}}"></paper-input>
      <paper-input type="number" name="tiga"label="BLABLABLA3" value="{{todo.tiga}}"></paper-input>


   <paper-icon-button src="calculator.ico" on-tap="_addTodo"></paper-icon-button>

      </div>
<vaadin-grid item="{todos}">
        <table>
          <colgroup>
            <col name="satu">
            <col name="dua">
            <col name="tiga">
          </colgroup>
        </table>
      </vaadin-grid>
    </div>
  </template>

  <script>
    Polymer({
      is: 'my-view2',
       properties: {
        todo: {
          type: Object,
          value: function() {
            return {};
          }
        },
        todos: {
          type: Array,
          value: function() {
            return [];
          }
        }
      },

      _addTodo: function() {
       this.push('todos', this.todo);
        this.todo = {};
      }

    });
  </script>
</dom-module>

Answer 1

您对 vaadin grid item 属性的绑定无效。您还缺少一个括号 {}，而且属性应该被称为 items 而不是 item（根据文档）。

Polymer 1.0 如何在按下按钮后在 vaadin 网格中显示纸张输入的值？

Polymer 1.0 how to show the value of paper input in vaadin grid after pushing button?

html

javascript

grid

jquery

polymer