Polymer 1.0中IF条件函数未正确返回true的问题求助

AI 小北

2026-5-15

排查Polymer 1.0中_searchButton函数未正确设置属性的问题

看起来你的逻辑本身是对的，但没生效肯定是某个环节出了问题，我给你梳理几个最常见的原因和排查步骤：

1. searchUsagesBtn属性未在Polymer中声明
Polymer的属性系统需要你显式声明要追踪的属性，否则直接赋值this.searchUsagesBtn不会触发视图更新，甚至可能无法正确存储值。你需要在元素的properties块里定义它：

Polymer({
  is: 'your-element-tag',
  properties: {
    searchUsagesBtn: {
      type: Boolean,
      value: false, // 初始值
      notify: true // 如果需要把变化通知给父元素的话可选
    },
    // 别忘了同时声明另外两个下拉框绑定的属性
    selectednamedropdown: {
      type: String,
      value: 'no_name_selected'
    },
    selectedtypedropdown: {
      type: String,
      value: 'no_type_selected'
    }
  },
  // 你的函数...
});

2. 函数的参数传递或触发时机有问题
你当前的函数依赖传入selectednamedropdown和selectedtypedropdown两个参数，但如果是通过DOM事件（比如下拉框的change）触发的话，Polymer事件处理函数的第一个参数是事件对象，而不是你期望的属性值。这会导致你的参数值完全不对，自然不会进入true分支。
更可靠的方式是直接从元素实例的属性中取值，或者用Polymer的**观察者（observer）**来自动响应属性变化：
```
// 用观察者替代手动事件绑定，只要两个属性变化就自动触发
observers: [
  '_searchButton(selectednamedropdown, selectedtypedropdown)'
],
_searchButton: function(nameVal, typeVal) {
  // 先打印值调试，确认实际传入的是什么
  console.log('Name selected:', nameVal, 'Type selected:', typeVal);
  this.searchUsagesBtn = (nameVal === 'no_name_selected') && (typeVal === 'no_type_selected');
}
```
这种方式不需要手动给下拉框绑定on-change，只要下拉框的value和selectednamedropdown/selectedtypedropdown做了双向绑定（比如value="{{selectednamedropdown::change}}"），属性变化时观察者就会自动触发。
3. 下拉框的实际选中值和预期不符
有可能你的下拉框选项的value并不是精确的"no_name_selected"或"no_type_selected"——比如大小写错误、多了空格，或者默认选中的是其他值。建议在函数里加console.log打印实际的属性值，确认是否和你期望的一致。
4. 函数的this上下文错误
如果是手动通过addEventListener绑定函数，或者在其他非Polymer的上下文里调用_searchButton，this可能不会指向你的Polymer元素实例，导致赋值this.searchUsagesBtn无效。用观察者或者Polymer模板里的on-*绑定可以避免这个问题，因为这些方式会自动确保this指向元素实例。

快速修正示例

把这些点整合起来，一个完整的示例大概是这样：

<dom-module id="your-element-tag">
  <template>
    <select value="{{selectednamedropdown::change}}">
      <option value="no_name_selected">No Name Selected</option>
      <!-- 其他选项 -->
    </select>
    <select value="{{selectedtypedropdown::change}}">
      <option value="no_type_selected">No Type Selected</option>
      <!-- 其他选项 -->
    </select>
    <button disabled$="{{!searchUsagesBtn}}">Search</button>
  </template>
  <script>
    Polymer({
      is: 'your-element-tag',
      properties: {
        searchUsagesBtn: {
          type: Boolean,
          value: false
        },
        selectednamedropdown: {
          type: String,
          value: 'no_name_selected'
        },
        selectedtypedropdown: {
          type: String,
          value: 'no_type_selected'
        }
      },
      observers: [
        '_searchButton(selectednamedropdown, selectedtypedropdown)'
      ],
      _searchButton: function(nameVal, typeVal) {
        console.log('Current values:', nameVal, typeVal);
        this.searchUsagesBtn = (nameVal === 'no_name_selected') && (typeVal === 'no_type_selected');
      }
    });
  </script>
</dom-module>

先试试加console.log看实际值，再检查属性声明和观察者/事件绑定，应该就能找到问题所在了。

内容的提问来源于stack exchange，提问作者devAds

Polymer 1.0中IF条件函数未正确返回true的问题求助

快速修正示例 #

快速修正示例