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

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>

However when selecting the first item the search.selectedItem gets populated with the value 0 and upon inspection it seems the core-menu's selected attribute is also the integer 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 而不是空字符串

I get 0 instead of empty string in polymer's paper-dropdown-menu (core-menu)

data-binding

types

web-component

polymer