Question

我正在尝试显示基于对象类型的元素。例如，如果对象类型为“string”，则应显示paper-input;如果类型为'boolean'，则应显示paper-radio-group等。

以下是组件模板的片段。

<template is="dom-if" if="{{_isStringInput(question.input_type)}}">
   <paper-input name="{{question.id}}" label="{{question.sort}}. {{question.text}}" always-float-label placeholder="{{question.help}}" required="{{question.required}}" error-message="Required" class="{{_isRequiredClass(question.required)}}"></paper-input>
</template>

<template is="dom-if" if="{{_isBooleanInput(question.input_type)}}">
   <label>{{question.sort}}. {{question.text}}</label>
   <paper-radio-group selected="" name="{{question.id}}" attr-for-selected="value" data-required="{{question.required}}">
      <paper-radio-button name="{{question.id}}" value="yes">Yes</paper-radio-button>
      <paper-radio-button name="{{question.id}}" value="no">No</paper-radio-button>
      <p class="radio-error-message">Required</p>
   </paper-radio-group>
</template>

您可以想象，如果我要检查更多类型（'int'，'date'，'email'等），dom-if列表可能会变得越来越大。

如果没有一堆dom-if模板，是否有更好/更优雅的方法？（我正在考虑切换案例与一堆if-else-ifs，但在Polymer中）

Answer 1

我认为这些是聚合物最接近的东西。

Dom-else

Dom-if-else

找不到任何if-else-if。

Here是Github上的一个开放增强问题。不要指望聚合物很快就会有这样的变化。

Answer 2

如果您不介意隐藏元素而不是销毁元素（无论如何选择加入dom-if），您可以使用CSS或hidden属性来切换DOM的可见性

使用CSS类隐藏元素

toggle函数可能有点笨拙，但这就是你必须使用类切换的方法。有关属性的示例，请参见下文。

Polymer({
  is: 'toggle-element',
    
  toggle: function() {
    if(!this.disabled) {
      this.disabled = 'disabled';
    } else {
      this.disabled = null;
    }
  }
});

<head>
  <base href="https://polygit.org/components/" />
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import" />
</head>

<body>
  <toggle-element></toggle-element>

  <dom-module id="toggle-element">
    <template>
      <style>
        .disabled {
          display: none;
        }
      </style>
      
      <button on-tap="toggle">Click to toggle</button>
      <div class$="{{disabled}}">this will toggle</div>
    </template>
  </dom-module>
</body>

使用`hidden`属性

这是一个更干净的选项，但只适用于布尔属性。

Polymer({
  is: 'toggle-element',
    
  toggle: function() {
    this.disabled = !this.disabled;
  } 
});

<head>
  <base href="https://polygit.org/components/" />
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import" />
</head>

<body>
  <toggle-element></toggle-element>

  <dom-module id="toggle-element">
    <template>          
      <button on-tap="toggle">Click to toggle</button>
      <div hidden$="{{disabled}}">this will toggle</div>
    </template>
  </dom-module>
</body>

使用属性和CSS隐藏元素

与上面类似，但是使用属性选择器，你可以做任何可能的CSS而不仅限于隐藏（现在想想它，你也可以设置hidden属性的样式，Polymer使用它默认。原理相同）

Polymer({
  is: 'toggle-element',
    
  toggle: function() {
    this.disabled = !this.disabled;
  } 
});

<head>
  <base href="https://polygit.org/components/" />
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import" />
</head>

<body>
  <toggle-element></toggle-element>

  <dom-module id="toggle-element">
    <template>
      <style>
        [disabled] {
          display: none;
        }

        div:not([disabled]) {
          color: green;
        }
      </style>
      
      <button on-tap="toggle">Click to toggle</button>
      <div disabled$="{{disabled}}">this will toggle</div>
    </template>
  </dom-module>
</body>

在聚合物中是否有一堆dom-if的替代品？

2 个答案:

使用CSS类隐藏元素

使用`hidden`属性

使用属性和CSS隐藏元素

在聚合物中是否有一堆dom-if的替代品？

2 个答案:

使用CSS类隐藏元素

使用hidden属性

使用属性和CSS隐藏元素

使用`hidden`属性