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中的隐藏/显示部分

回答

相关问题