Polymer 1.0 Детский элемент, не стреляющий в родителя

У меня возникли проблемы с попыткой запустить событие от дочернего элемента к его родительскому элементу на Polymer 1.0, и я не вижу, что я делаю неправильно.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, которое работает по-другому.

источник

2015-06-26 Iskalla

Не могли бы вы опубликовать определение мастер-администратора? Имеет ли он зависимость от элементов Core-X? –

Кажется, что ваша функция 'datachanged' не вызывается. Как настроены ваши 'наблюдатели' в' '? – zerodevx

Вам не нужно свойство «прослушиватель», установленное в родительском элементе? https://www.polymer-project.org/1.0/docs/devguide/events.html –

Основная настройка, которую вы описываете, работает, в деталях должна быть проблема. Вот пример:

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

источник

2015-06-27 05:36:14

У меня на самом деле есть эта настройка, работающая над другим элементом без каких-либо проблем, но не могу сделать это на этом, я просто потерян ... Я обновил мой вопрос, чтобы более точно отразить то, что я делаю. Спасибо за ваш пример – Iskalla

Можете ли вы попробовать это?

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

источник

2015-07-26 13:34:28 RosAng

Polymer 1.0 Детский элемент, не стреляющий в родителя

ответ

Смежные вопросы