Question

我想有条件地隐藏/显示htmlbars模板的一部分，但是我不希望它从DOM中删除。如果我使用{{if}}块帮助器，它会从DOM中删除它。我设法通过内联{{if}}帮助程序完成此更改类名称。我想知道是否有更好的方法来实现这个目标？

<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>

Answer 1

不，没有比使用类隐藏它更好的方法。如果您希望它保留在DOM中，则您的类需要在其定义中包含display:block。如果您希望它不可见但仍保留其尺寸，则需要visibility: hidden。

Answer 2

ember中的每个视图/组件都配有一个可以切换的isVisible标志。这将完全符合您的要求。离。

{{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）

隐藏/显示EmberJS中的部分

2 个答案: