在聚合物中是否有一堆dom-if的替代品？
[英]Is there an alternative to a bunch of dom-if's in Polymer?
問題描述
我正在嘗試基於對象類型顯示元素。 例如，如果對象類型為“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中）
2 個解決方案
解決方案1
1 2016-06-25 11:21:46
解決方案2
1 2016-06-25 12:54:25
如果您不介意隱藏元素而不是銷毀元素（無論如何都選擇使用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-如果不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.