Программная установка метки PaperItem основного выпадающего элемента

Question

У меня есть следующий выпадающий элемент core-elements, в котором я использовал paper-item вместо core-item для отображения выпадающего ярлыка.

//.html

  <input required
    id='birthday'
    name='birthday'
    type='date'
    value="{{age.birthday}}"
    on-change='{{inputHandler}}'>

<div layout horizontal>
  <div layout vertical self-center
    id='years-div'>Years
    <core-dropdown  disabled
      id='years-core-ddwn'
      halign="left"
      label='0'
      valueattr="label">
      <template repeat="{{year in yearsList}}">
        <paper-item id='years-ppr-itm' label="{{year}}"></paper-item>
      </template>
    </core-dropdown>
  </div>

//.dart

var yearsList = <int>[ 1, 2, 3, 4]
@observable int year = 0;

class Age
{
  int years = 0;
  String birthday = '';     
} 


// calcualate age in years
      void inputHandler()
      {
        if ( age.birthday != '' )
        {
          DateTime now = new DateTime.now();
          DateTime birthday = DateTime.parse( age.birthday.replaceAll( r'-', '') );

          //Duration dayz = ( birthday.difference( new DateTime.now() ) ).inDays;
          Duration duration = new DateTime.now().difference( birthday );

          // calculate years since birth
          int days = duration.inDays;
          age.years = days ~/ 365;

      // attempting to set the PaperItem label to the calculated age
          yearsPprItm = $[ 'years-ppr-itm' ] as PaperItem;

          // neither of the following resets the PaperItem label to the age variable
          yearsPprItm.setAttribute( 'label', age.years.toString() );
          //year = age.years.toString();
    }  

Раскрывающийся список отображается нормально, а выбранный элемент также восстанавливается.
Нет трассировки стека ошибок, но метка бумажного элемента не изменяется с помощью setAttribute или при назначении age.years наблюдаемому году, к которому привязана метка.

Мне интересно, если это незаконно, чтобы связать и итератор переменной. Если так, то каков правильный метод выполнения того, что я пытаюсь сделать?

Спасибо

Answer 1

Вы не можете, насколько я знаю, ожидать года

<template repeat="{{year in yearList}}">

быть обязательным для

@observable int year;

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

Единственный способ привязать шаблон к году - это изменить

<template repeat="{{year in yearList}}">
    <paper-item label="{{year}}"></paper-item>
</template>

в

<template repeat="{{id in yearList}}">
    <paper-item label="{{year}}"></paper-item>
</template>

Проблема в том, что, когда год обновляется, он будет обновляться до одинакового значения в каждом отображаемом. Я думаю, что вы хотите что-то вроде этого

<template repeat="{{ year in yearList }}">
    <paper-item label="{{year.years}}"></paper-item>
</template>

с поддержкой годовой список существ

List<Age> yearList = [new Age(0), new Age(1), ...];

и возраст

class Age extends Observable {
    @observable int years;
    String birthday = '';

    Year(this.year);
}

Затем вы можете обновить элемент в списке, и изменение будет отражено на дисплее. По крайней мере, это что-то вроде того, что я думаю, что вы после. Я уверен, что есть и другие способы сделать это, а также то, что я предлагаю. Если только я тоже не понимаю, за чем ты.

Answer 2

редактировать

    <core-dropdown  disabled
                    id='years-core-ddwn'
                    halign="left"
                    label='0'
                    valueattr="label" selected="{{age.years}}"> <!-- added `selected` attribute -->
      <template repeat="{{year in yearsList}}">
        <paper-item label="{{year}}"></paper-item> <!-- don't add static id in <template repeat> -->
      </template>
    </core-dropdown>

сделать возрастной класс видимым, чтобы <core-dropdown> выбор обновляется автоматически.

class Age extends Observable {
  @observable
  int years = 0;
  String birthday = '';
}

старый ответ

Это не может работать:

  <template repeat="{{year in yearsList}}">
    <!-- for each item in yearsList a paper-item with the id 'years-ppr-itm' is created
         but 'id' is supposed to be unique. -->
    <paper-item id='years-ppr-itm' label="{{year}}"></paper-item>
  </template>

Вам просто нужно изменить yearsList список, содержащий значения года, которые вы хотите, и элементы обновляются автоматически.

Что нужно изменить в своем коде, чтобы он работал:

менять

var yearsList = <int>[ 1, 2, 3, 4];

в

var yearsList = toObservable(<int>[ 1, 2, 3, 4]);

toObservable() уведомляет Polymer о добавленных / удаленных элементах списка.
Если вы назначите другой список yearsList вместо добавления удаления значений нужно сделать это как

// declaration/initialization
@observable
var yearsList = toObservable(<int>[ 1, 2, 3, 4]);

...

// later assignment of a new list
yearsList = toObservable(<int>[ 5, 6, 7, 8]);

Если вы не изменяете элементы списка и всегда назначаете новый список yearsList вы можете опустить toObservable() но нет @observable