2015-06-26 32 views
1

我在嘗試從子元素向聚合物1.0上的父元素引發事件時遇到問題,而且我看不到我做錯了什麼。聚合物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父母沒有。

警報永遠不會觸發,也不會產生任何錯誤。我想只是聚合物1.0的一些作品與衆不同。

+0

你能發表您的主管理員定義是什麼?它是否對Core-X元素有依賴性? –

+0

好像你的'datachanged'函數沒有被調用。 ''master-admin>'中的'observers'是如何設置的? – zerodevx

+0

不需要在父元素中設置「偵聽器」屬性嗎? https://www.polymer-project.org/1.0/docs/devguide/events.html –

回答

0

您所描述的基本設置確實有效,在某處的詳細信息中必定存在問題。這裏有一個例子:

<!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>

+0

我其實已經在另一個元素上工作,沒有任何問題,但不能在這一個上,我只是失去了...我已經更新我的問題更準確地反映我在做什麼。感謝你的例子 – Iskalla

0

你可以試試這個?

<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> 
 
\t var template = document.querySelector('#t'); 
 
\t template.masterupdated= function() { 
 
\t consloe.log("MASTER UPDATED!!"); 
 
    \t \t \t }; 
 
</script>