dart - 以编程方式设置核心下拉元素的 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 分配给标签绑定(bind)到的可观察年份不会更改纸张项目标签。

我想知道绑定(bind)和迭代器变量是否非法。如果是这样，完成我想做的事情的正确方法是什么。

谢谢

Answer 1

据我所知，你不能期待这一年

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

成为一个约束

@observable int year;

正如我认为模板中的年份是本地创建的变量，与您在支持类中创建的可观察年份无关。不过，我必须查阅文档以获得更好的解释。

使模板绑定(bind)到年份的唯一方法是更改

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

支持 yearList 是

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

和年龄

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

    Year(this.year);
}

然后您可以更新列表中的项目，更改将反射(reflect)在显示中。至少那是我认为你所追求的。我相信还有其他方法可以做到这一点以及我的建议。除非我也不明白你在追求什么。