Question

我正在使用动态下拉菜单，其中包含使用数据绑定的选项。数据如下所示：

options = [
 { 
    name: "Alle",
    value: ""
 },
    name: "100",
    value: "100"
 },
 // ...
]

这样的代码：

<paper-dropdown-menu label="Select">
  <paper-dropdown class="dropdown">
    <core-menu class="menu" valueattr="data-value" selected="{{search.selectedItem}}">
      <template repeat="{{item in options}}">
        <paper-item data-value="{{item.value}}">{{item.name}}</paper-item>
      </template>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

然而，当选择第一个项目时search.selectedItem会填充值0，并且在检查时，核心菜单的selected属性似乎也是整数0。

所有其他值按预期工作（字符串）。

当我查看Chrome检查元素时，呈现的html如下所示：

<paper-item data-value="" tabindex="0" class="core-selected" active="">Alle</paper-item>

如何将它强制为空字符串，就像我的数据一样？

Answer 1

不幸的是，core-selector的代码高度依赖于以下检查：

SMTH = this.selectedItem ? TRUTHY, FALSEY;

正在评估空字符串FALSEY，与任意非空字符串不同。这就是控制器在空字符串上疯狂的原因。

我建议您使用以下解决方法。我们为您的selectedItem：

定义一个过滤器

<core-menu class="menu" 
           valueattr="data-value" 
           selected="{{selectedItem | fixZero}}">
<!--                                ⇑⇑⇑⇑⇑⇑⇑⇑⇑     -->

应该是both-way-bound：

  fixZero: {
    toDOM: function(value) { // called when model changes
      return value;
    },
    toModel: function(value) { // called when DOM changes
      return value === 0 ? '' : value;
    }
  }

这会欺骗core-selector并在完成所有验证后将值重置为空字符串（假设您没有故意为零值。）

实例：http://plnkr.co/edit/L5fNgevDERNo7tJQyU0n?p=preview

我在聚合物的纸张下拉菜单（核心菜单）中得到0而不是空字符串

1 个答案: