以编程方式设置核心下拉元素的 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>

支持 yearList 是

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>

使 Age 类可观察，以便 <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