event in one polymer to change attributes of anoth

问题:

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();

}

回答1:

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();