EmberJS中的隱藏/顯示部分

我想有條件地隱藏/顯示htmlbars模板的一部分，但我不希望它從DOM中刪除。如果我使用{{if}}幫助程序，它會將其從DOM中刪除。我設法用inline {{if}}幫助器來完成這個改變類名的工作。我想知道是否有更好的方法來實現這一目標？EmberJS中的隱藏/顯示部分

<div class="{{if (not isEnglishSelected) 'hidden'}} {{if isEnglishSelected 'show'}}"> 

     <div class="form-group"> 
      <label class="col-sm-2 col-md-3 control-label" for="name_en">{{t 'label.name'}}</label> 

      <div class="col-sm-10 col-md-9"> 
       {{input type="text" class="form-control" id="name_en" value=model.name_en autofocus=true}} 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 col-md-3 control-label" for="description_en">{{t 'label.description'}}</label> 

      <div class="col-sm-10 col-md-9"> 
       {{textarea class="form-control" id="description_en" value=model.description_en rows="5"}} 
      </div> 
     </div> 

     <div class="form-group {{if (not isEnglishSelected) 'show'}} {{if isEnglishSelected 'hidden'}}"> 
      <label class="col-sm-2 col-md-3 control-label" for="description_fr">{{t 'label.description'}}</label> 

      <div class="col-sm-10 col-md-9"> 
       {{#if isEnglishSelected}} 
        {{textarea class="form-control" 
        id="description_fr" value=model.description_en rows="5"}} 
       {{else}} 
        {{textarea class="form-control" id="description_fr" value=model.description_fr rows="5"}} 
       {{/if}} 
      </div> 
     </div> 

    </div>

來源

2015-10-01 jpoiri

不，沒有比使用類隱藏它更好的方法。如果您希望它保留在DOM中，則您的課程在其定義中需要有display:block。如果您希望它不可見但仍保留其尺寸，則需要visibility: hidden。

來源

2015-10-01 15:12:12 Jason

燼中的每個視圖/組件均配有可切換的isVisible標誌。這將做你正在尋找的東西。 ex。

{{textarea class="form-control" id="description_fr" value=model.description_en rows="5" isVisible=isEnglishSelected}} 
{{textarea class="form-control" id="description_fr" value=model.description_fr rows="5" isVisible=isEnglishNotSelected}}

但是，在這種情況下，我建議您將確定您的價值的邏輯推入控制器，並消除您在視圖中重複的需要。

作爲一個方面說明，您可以隨時將元素轉換爲組件/視圖並應用isVisible標誌（參考帶有內聯條件的最外面的div）

來源

2015-10-03 08:15:11 kdbuck

EmberJS中的隱藏/顯示部分

回答

相關問題