事件在一个聚合物中改变另一聚合物的属性，它们不具有父子关系 [英] event in one polymer to change attributes of another polymer, them not having parent child relation

问题描述

Polymer元素 a 中的事件处理程序应更改Polymer元素 b 中的属性。

我尝试过（ a.dart ）：

- imported b.dart

- 元素 b 的查询选择器。

- 称为修改值的函数。

- 值更改（打印））。但不在UI上更新。

- 修改的变量是可见的

a.html

 < template> 
< input type =imagesrc =button_minus_red.gifon-click ={{removePlayer}}width =15height =15> 
 {{playerName}}：{{playerCost}}< br> 
< / template> 
  

b.html

 < template> 
< h1>团队规模：{{playerCount}}< / h1> 
< h1>团队价值< / h1> 
< br> 
< / template> 
  

b.dart

 void reduceCount（）{
 playerCount  -  = 1; 
 print（PLayerCount）; 
 print（playerCount）; 
} 
 TeamItem.created（）：super.created（）; 
} 
  

a.dart

< preCount（'player-item'）
class PlayerItem extends PolymerElement {
@observable String playerName;
@observable String playerCost;
void removePlayer（）{
print（'dispatching from child'）;
querySelector（＃playerCounts）。reduceCount（）;
remove（）;
} PlayerItem.created（）：super.created（）;

}

解决方案

您只搜索 a 的子项。
如果你想搜索整个页面，你需要

  import'dart：html'as dom; 
 ... 
（dom.querySelector（'* / deep / #playerCounts'）
 as TeamPlayer）.reduceCount（）; 
  

An event handler in Polymer element a should change an attribute in Polymer element b.

I tried (within a.dart):
- imported b.dart
- query selector for element b.
- called the function which modifies the value.
- the value changes(print)). but not updated on UI.
- modified variable is observable

a.html

<template>
    <input type="image" src="button_minus_red.gif" on-click="{{removePlayer}}" width = "15" height ="15">
    {{playerName}}:{{playerCost}}<br>
  </template>

b.html

<template>
    <h1>Team Size:{{playerCount}}</h1>
    <h1>Team Value</h1>
    <br>
  </template>

b.dart

@CustomTag('team-item')
class TeamItem extends PolymerElement{
  @observable int playerCount =0;
  void reduceCount(){
    playerCount -= 1;
    print("PLayerCount");
    print(playerCount);
  }
  TeamItem.created(): super.created();
}

a.dart

@CustomTag('player-item')
class PlayerItem extends PolymerElement{
  @observable String playerName;
  @observable String playerCost;
  void removePlayer() {
    print('dispatching from child');
    querySelector("#playerCounts").reduceCount();
    remove();
  }PlayerItem.created(): super.created();

}

解决方案

This way you only search the children of a. If you want to search the whole page you need to

import 'dart:html' as dom;
...
(dom.querySelector('* /deep/ #playerCounts') 
    as TeamPlayer).reduceCount();

这篇关于事件在一个聚合物中改变另一聚合物的属性，它们不具有父子关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！