Question

我在Polymer 1.0上尝试从子元素向其父元素触发事件时遇到了麻烦，我无法看到我做错了什么。

已编辑：添加更多代码

孩子的代码：

<link rel="import" href="../components/polymer/polymer.html" />
<link rel="import" href="../components/iron-input/iron-input.html" />
<link rel="import" href="../components/iron-icon/iron-icon.html" />
<link rel="import" href="../components/paper-input/paper-input container.html" />
<link rel="import" href="../components/paper-input/paper-input-error.html" />
<link rel="import" href="../components/iron-input/iron-input.html" />
<link rel="import" href="custom-table.html" />
<dom-module id="master-admin">
    <style is="custom-style">
       [...]
    </style>
    <template>
        <custom-table selectable collist="{{columns}}" data="{{data}}">
        </custom-table>
        <div id="newrow" class="horizontal layout" hidden>
            <template is="dom-repeat" items="{{columns}}" as="col">
                <paper-input-container class="container flex">
                    <label class="label">{{col.name}}</label>
                    <input class="input" id="input" is="iron-input">
                </paper-input-container>
            </template>
        </div>
        <div id="iconsdiv" class="horizontal layout">
            <iron-icon id="adicon" icon="add-circle" on-click="addrow"></iron-icon>
            <div class="flex"></div>
            <iron-icon id="delicon" icon="cancel" on-click="delrow"></iron-icon>
            <iron-icon id="edicon" icon="create" on-click="editrow"></iron-icon>
        </div>
    </template>
    <script>
    Polymer({
        is: 'master-admin',
        properties: {
            doctype: String,
            columns: Array,
            data: Array
        },
        datachanged: function () {
            debugger;
            var updatedata = {
                data: this.data,
                doctype: this.doctype
            };
            this.fire('data-updated', updatedata);
        },
        addrow: function (e) {
            [...]
            this.datachanged();
        },
        delrow: function (e) {
            [...]
            this.datachanged();
        },
        editrow: function (e) {
            [...]
            this.datachanged();
        }
    });
    </script>
    </dom-module>

父母：

<master-admin 
    doctype="{{master.DocumentalTypeId}}" 
    columns="{{master.Columns}}" 
    data="{{master.Data}}" 
    on-data-updated="masterupdated">
</master-admin>

masterupdated: function () {
    alert('updated master!');
}

为了清楚起见，datachanged工作得很好，并且它应该被调用。父母的masterupdated没有。

警报永远不会触发，代码也不会发出任何错误。我想这与Polymer 1.0的工作方式不同。

Answer 1

您描述的基本设置确实有效，某处的细节必定存在问题。这是一个例子：

＆＃13;

<!doctype html>
<head>
  
  <meta charset="utf-8">

  <base href="http://milestech.net/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  
  <style>
    body {
      font-family: sans-serif;
    }
  </style>

</head>
<body>
  
<x-parent></x-parent>
<hr>
  
<dom-module id="master-admin">
  <template>
    
    <button on-tap="updateData">Update Data</button>
    
  </template>
  <script>
    // only need this when both (1) in the main document and (2) on non-Chrome browsers
    addEventListener('WebComponentsReady', function() {
      
      Polymer({
        is: 'master-admin',
        updateData: function() {
          this.fire('data-updated');
        }
        
      });
      
    });
  </script>
</dom-module>
  
<dom-module id="x-parent">
  <style>

  
  </style>
  <template>
  
    <master-admin on-data-updated="masterupdated"></master-admin>

  </template>
  <script>
    // only need this when both (1) in the main document and (2) on non-Chrome browsers
    addEventListener('WebComponentsReady', function() {
      
      Polymer({
        is: 'x-parent',        
        masterupdated: function() {
          document.body.appendChild(this.create('h3', {textContent: 'data-updated!'}));
        }
        
      });
      
    });
  </script>
</dom-module>

</body>

＆＃13;

Answer 2

你能试试吗？

＆＃13;

<template is="dom-bind" id="t">
<master-admin 
    doctype="{{master.DocumentalTypeId}}" 
    columns="{{master.Columns}}" 
    data="{{master.Data}}" 
    on-data-updated="masterupdated">
</master-admin>
  </template>

<script>
	var template = document.querySelector('#t');
	template.masterupdated= function () {
	consloe.log("MASTER UPDATED!!");
  			};
</script>

＆＃13;

Polymer 1.0子元素未向父级触发

2 个答案: